@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();
}