Skip to content

Commit

Permalink
refactor(core): improve API documentation for output (#54925)
Browse files Browse the repository at this point in the history
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 #54925
  • Loading branch information
devversion authored and dylhunn committed Mar 26, 2024
1 parent c91159a commit 318c5b0
Showing 1 changed file with 31 additions and 9 deletions.
40 changes: 31 additions & 9 deletions packages/core/src/authoring/output/output.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit 318c5b0

Please sign in to comment.