docs: replace EventEmitter with output and self-closing tags in templates (#60910)

Replaced all instances of EventEmitter with the new output() utility.
Updated templates to use self-closing tags for cleaner markup.

PR Close #60910

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

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: ` <app-bank-account bankName="RBC" account-id="4747"> </app-bank-account> `,
-  standalone: false,
+  template: ` <app-bank-account bankName="RBC" account-id="4747" /> `,
+  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<string>();
-  fiveSecs = new EventEmitter<string>();
+  everySecond = output<string>();
+  everyFiveSeconds = output<string>();
 
   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: `
-    <app-interval-dir (everySecond)="onEverySecond()" (everyFiveSeconds)="onEveryFiveSeconds()">
-    </app-interval-dir>
+    <app-interval-dir (everySecond)="onEverySecond()" (everyFiveSeconds)="onEveryFiveSeconds()" />
   `,
-  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 {}