diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts index 2bd94fec936..d8e6addce59 100644 --- a/packages/core/src/metadata/directives.ts +++ b/packages/core/src/metadata/directives.ts @@ -423,7 +423,7 @@ export interface ComponentDecorator { * * ### Setting component outputs * - * The following example shows two event emitters that emit on an interval. One + * The following example shows two output function that emit on an interval. One * emits an output every second, while the other emits every five seconds. * * {@example core/ts/metadata/directives.ts region='component-output-interval'} diff --git a/packages/examples/core/ts/metadata/directives.ts b/packages/examples/core/ts/metadata/directives.ts index 557bbefbf00..73036cc57ce 100644 --- a/packages/examples/core/ts/metadata/directives.ts +++ b/packages/examples/core/ts/metadata/directives.ts @@ -6,14 +6,13 @@ * found in the LICENSE file at https://angular.dev/license */ /* tslint:disable:no-console */ -import {Component, Directive, EventEmitter, NgModule} from '@angular/core'; +import {Component, Directive, output} from '@angular/core'; // #docregion component-input @Component({ selector: 'app-bank-account', inputs: ['bankName', 'id: account-id'], template: ` Bank Name: {{ bankName }} Account Id: {{ id }} `, - standalone: false, }) export class BankAccountComponent { bankName: string | null = null; @@ -25,8 +24,8 @@ export class BankAccountComponent { @Component({ selector: 'app-my-input', - template: ` `, - standalone: false, + template: ` `, + imports: [BankAccountComponent], }) export class MyInputComponent {} // #enddocregion component-input @@ -34,26 +33,23 @@ export class MyInputComponent {} // #docregion component-output-interval @Directive({ selector: 'app-interval-dir', - outputs: ['everySecond', 'fiveSecs: everyFiveSeconds'], - standalone: false, }) export class IntervalDirComponent { - everySecond = new EventEmitter(); - fiveSecs = new EventEmitter(); + everySecond = output(); + everyFiveSeconds = output(); constructor() { setInterval(() => this.everySecond.emit('event'), 1000); - setInterval(() => this.fiveSecs.emit('event'), 5000); + setInterval(() => this.everyFiveSeconds.emit('event'), 5000); } } @Component({ selector: 'app-my-output', template: ` - - + `, - standalone: false, + imports: [IntervalDirComponent], }) export class MyOutputComponent { onEverySecond() { @@ -64,8 +60,3 @@ export class MyOutputComponent { } } // #enddocregion component-output-interval - -@NgModule({ - declarations: [BankAccountComponent, MyInputComponent, IntervalDirComponent, MyOutputComponent], -}) -export class AppModule {}