Output

The output function allows declaration of Angular outputs in directives and components.

You can use outputs to emit values to parent directives and component. Parents can subscribe to changes via:

template event bindings. For example, (myOutput)="doSomething($event)"
programmatic subscription by using OutputRef#subscribe.

API

function output<T = void>(opts?: OutputOptions | undefined): OutputEmitterRef<T>;

OutputEmitterRef<T>

@paramoptsOutputOptions | undefined

@returnsOutputEmitterRef<T>

Usage notes

To use output(), import the function from @angular/core.

import {output} from '@angular/core';

Inside your component, introduce a new class member and initialize it with a call to output.

@Directive({
  ...
})
export class MyDir {
  nameChange = output<string>();    // OutputEmitterRef<string>
  onClick    = output();            // OutputEmitterRef<void>
}

You can emit values to consumers of your directive, by using the emit method from OutputEmitterRef.

updateName(newName: string): void {
  this.nameChange.emit(newName);
}

Usage Notes

To use output(), import the function from @angular/core.

import {output} from '@angular/core';

Inside your component, introduce a new class member and initialize it with a call to output.

@Directive({
  ...
})
export class MyDir {
  nameChange = output<string>();    // OutputEmitterRef<string>
  onClick    = output();            // OutputEmitterRef<void>
}

You can emit values to consumers of your directive, by using the emit method from OutputEmitterRef.

updateName(newName: string): void {
  this.nameChange.emit(newName);
}