@Output binding

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

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