mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
refactor(core): improve API documentation for output (#55053)
This improves the API documentatino for `output` in angular.dev, similar to how we improved the API for `input`. Angular.dev can now show these documentation entries more readable if annotated explicitly as initializer API. Note: output API is short enough that we want to include the types in the code snippet previews. PR Close #55053
This commit is contained in:
parent
f8aa778b70
commit
658fb0a17f
1 changed files with 31 additions and 9 deletions
|
|
@ -20,25 +20,47 @@ export interface OutputOptions {
|
|||
}
|
||||
|
||||
/**
|
||||
* The `output` function allows declaration of outputs in directives and
|
||||
* components.
|
||||
* The `output` function allows declaration of Angular outputs in
|
||||
* directives and components.
|
||||
*
|
||||
* Initializes an output that can emit values to consumers of your
|
||||
* directive/component.
|
||||
* 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`.
|
||||
*
|
||||
* @usageNotes
|
||||
* Initialize an output in your directive by declaring a
|
||||
* class field and initializing it with the `output()` function.
|
||||
*
|
||||
* 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`.
|
||||
*
|
||||
* ```ts
|
||||
* @Directive({..})
|
||||
* @Directive({
|
||||
* ...
|
||||
* })
|
||||
* export class MyDir {
|
||||
* nameChange = output<string>(); // OutputEmitterRef<string>
|
||||
* onClick = output(); // OutputEmitterRef<void>
|
||||
* 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`.
|
||||
*
|
||||
* ```ts
|
||||
* updateName(newName: string): void {
|
||||
* this.nameChange.emit(newName);
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @developerPreview
|
||||
* @initializerApiFunction {"showTypesInSignaturePreview": true}
|
||||
*/
|
||||
export function output<T = void>(opts?: OutputOptions): OutputEmitterRef<T> {
|
||||
ngDevMode && assertInInjectionContext(output);
|
||||
|
|
|
|||
Loading…
Reference in a new issue