Untitled

 avatar
unknown
javascript
2 years ago
666 B
5
Indexable
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="changeTest()">Change Test</button>
  `,
})
export class ChildComponent {
  @Input() test!: number;
  @Output() testChange = new EventEmitter<number>();

  changeTest() {
    this.test += 10;
    this.testChange.emit(this.test);
  }
}

@Component({
  selector: 'app-parent',
  template: `
    <p>Parent Test: {{ test }}</p>
    <app-child [test]="test" (testChange)="onTestChange($event)"></app-child>
  `,
})
export class ParentComponent {
  test = 5;

  onTestChange(newValue: number) {
    this.test = newValue;
  }
}
Editor is loading...