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 {}