@Output

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.

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#

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.

bindingPropertyName: string

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 {}