References
Oleksa Novyk | GitHub

@Output

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.

Example

@Output() testEvent = new EventEmitter<any>();

Alternatively, you can identify members in the outputs array of the directive metadata, as in this example:

@Component({
  outputs: ['testEvent'],
})

Options

@Output(propertyBindingName: string)

bindingPropertyName#

bindingPropertyName?: string

You can supply an optional name to use in templates when the component is instantiated, that maps to the name of the bound property. By default, the original name of the bound property is used for output binding.

The following example creates a component with two output properties, one of which is given a special binding name.

@Component({
  selector: 'output-test',
  ...
})
class BankAccount {
  // This property is bound using its original name.
  @Output() test = new EventEmitter();
  // this property value is bound to a different property name
  // when this component is instantiated in a template.
  @Input('test-2') test2 = new EventEmitter();
}

@Component({
  selector: 'app',
  template: `
    <output-test (test)="..." (test-2)="..."></output-test>
  `
})
class App {}