@Output binding
An Output property is an observable property annotated with an @Output
decorator. The property almost always returns an Angular EventEmitter
. Values flow out of the component as events bound with an event binding.
@Output() testEvent = new EventEmitter<any>();
Source
test-output.component.html
<button (click)="emitTest()">Click me!</button>
test-output.component.ts
@Component({
selector: 'test-output',
...
})
export component TestOutputComponent {
@Output() test = new EventEmitter();
emitTest() {
this.test.emit('test');
}
}
app.component.html
<test-output (test)="handleTest($event)"></test-output>
app.component.ts
export class AppComponent {
handleTest(value) {
alert(`Test event handled with value: ${value}`);
}
}
Result
Alternatively, you can identify members in the outputs array of the directive metadata, as in this example:
@Component({
...
outputs: ['test'],
})
export class TestOutputComponent {
test = new EventEmitter();
}