Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

output

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

See more...

      
      output<T = void>(opts?: OutputOptions): OutputEmitterRef<T>
    
Parameters
opts OutputOptions

Optional. Default is undefined.

Returns

OutputEmitterRef<T>

Description

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.

Further information is available in the Usage Notes...

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