output
The output
function allows declaration of Angular outputs in
directives and components.
output<T = void>(opts?: OutputOptions): OutputEmitterRef<T>
Parameters
opts
|
OutputOptions |
Optional. Default is |
Returns
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);
}