docs: migrate user-input code example to standalone (#51466)

PR Close #51466

aio/content/examples/user-input/src/app/app.component.ts

@@ -1,8 +1,29 @@
 // #docregion
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {ClickMeComponent} from './click-me.component';
+import {ClickMe2Component} from './click-me2.component';
+import {
+  KeyUpComponent_v1,
+  KeyUpComponent_v2,
+  KeyUpComponent_v3,
+  KeyUpComponent_v4,
+} from './keyup.components';
+import {LittleTourComponent} from './little-tour.component';
+import {LoopbackComponent} from './loop-back.component';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
-  templateUrl: './app.component.html'
+  templateUrl: './app.component.html',
+  imports: [
+    ClickMeComponent,
+    ClickMe2Component,
+    KeyUpComponent_v1,
+    KeyUpComponent_v2,
+    KeyUpComponent_v3,
+    KeyUpComponent_v4,
+    LittleTourComponent,
+    LoopbackComponent,
+  ],
 })
-export class AppComponent { }
+export class AppComponent {}

aio/content/examples/user-input/src/app/app.module.ts

@@ -1,37 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { ClickMeComponent } from './click-me.component';
-import { ClickMe2Component } from './click-me2.component';
-import {
-  KeyUpComponent_v1,
-  KeyUpComponent_v2,
-  KeyUpComponent_v3,
-  KeyUpComponent_v4
-} from './keyup.components';
-import { LittleTourComponent } from './little-tour.component';
-import { LoopbackComponent } from './loop-back.component';
-
-
-@NgModule({
-  imports: [
-    BrowserModule
-  ],
-  declarations: [
-    AppComponent,
-    ClickMeComponent,
-    ClickMe2Component,
-    KeyUpComponent_v1,
-    KeyUpComponent_v2,
-    KeyUpComponent_v3,
-    KeyUpComponent_v4,
-    LittleTourComponent,
-    LoopbackComponent
-  ],
-  providers: [
-
-  ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule { }

aio/content/examples/user-input/src/app/click-me.component.ts

@@ -5,14 +5,14 @@
 */
 
 // #docregion
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 // #docregion click-me-component
 @Component({
+  standalone: true,
   selector: 'app-click-me',
-  template: `
-    <button type="button" (click)="onClickMe()">Click me!</button>
-    {{clickMessage}}`
+  template: ` <button type="button" (click)="onClickMe()">Click me!</button>
+    {{ clickMessage }}`,
 })
 export class ClickMeComponent {
   clickMessage = '';

aio/content/examples/user-input/src/app/click-me2.component.ts

@@ -1,18 +1,18 @@
 // #docregion
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'app-click-me2',
-  template: `
-    <button type="button" (click)="onClickMe2($event)">No! .. Click me!</button>
-    {{clickMessage}}`
+  template: ` <button type="button" (click)="onClickMe2($event)">No! .. Click me!</button>
+    {{ clickMessage }}`,
 })
 export class ClickMe2Component {
   clickMessage = '';
   clicks = 1;
 
   onClickMe2(event: any) {
-    const evtMsg = event ? ' Event target is ' + event.target.tagName  : '';
-    this.clickMessage = (`Click #${this.clicks++}. ${evtMsg}`);
+    const evtMsg = event ? ' Event target is ' + event.target.tagName : '';
+    this.clickMessage = `Click #${this.clicks++}. ${evtMsg}`;
   }
 }

aio/content/examples/user-input/src/app/keyup.components.ts

@@ -1,22 +1,23 @@
 /* eslint-disable @angular-eslint/component-class-suffix */
 // #docplaster
 // #docregion
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
+  standalone: true,
   selector: 'app-key-up1',
-// #docregion key-up-component-1-template
+  // #docregion key-up-component-1-template
   template: `
-    <input (keyup)="onKey($event)">
-    <p>{{values}}</p>
-  `
-// #enddocregion key-up-component-1-template
+    <input (keyup)="onKey($event)" />
+    <p>{{ values }}</p>
+  `,
+  // #enddocregion key-up-component-1-template
 })
 // #docregion key-up-component-1-class, key-up-component-1-class-no-type
 export class KeyUpComponent_v1 {
   values = '';
 
-// #enddocregion key-up-component-1-class, key-up-component-1-class-no-type
+  // #enddocregion key-up-component-1-class, key-up-component-1-class-no-type
   /*
   // #docregion key-up-component-1-class-no-type
   onKey(event: any) { // without type info
@@ -26,10 +27,11 @@ export class KeyUpComponent_v1 {
   */
   // #docregion key-up-component-1-class
 
-  onKey(event: KeyboardEvent) { // with type info
+  onKey(event: KeyboardEvent) {
+    // with type info
     this.values += (event.target as HTMLInputElement).value + ' | ';
   }
-// #docregion key-up-component-1-class-no-type
+  // #docregion key-up-component-1-class-no-type
 }
 // #enddocregion key-up-component-1-class, key-up-component-1-class-no-type
 
@@ -37,11 +39,12 @@ export class KeyUpComponent_v1 {
 
 // #docregion key-up-component-2
 @Component({
+  standalone: true,
   selector: 'app-key-up2',
   template: `
-    <input #box (keyup)="onKey(box.value)">
-    <p>{{values}}</p>
-  `
+    <input #box (keyup)="onKey(box.value)" />
+    <p>{{ values }}</p>
+  `,
 })
 export class KeyUpComponent_v2 {
   values = '';
@@ -55,15 +58,18 @@ export class KeyUpComponent_v2 {
 
 // #docregion key-up-component-3
 @Component({
+  standalone: true,
   selector: 'app-key-up3',
   template: `
-    <input #box (keyup.enter)="onEnter(box.value)">
-    <p>{{value}}</p>
-  `
+    <input #box (keyup.enter)="onEnter(box.value)" />
+    <p>{{ value }}</p>
+  `,
 })
 export class KeyUpComponent_v3 {
   value = '';
-  onEnter(value: string) { this.value = value; }
+  onEnter(value: string) {
+    this.value = value;
+  }
 }
 // #enddocregion key-up-component-3
 
@@ -71,17 +77,18 @@ export class KeyUpComponent_v3 {
 
 // #docregion key-up-component-4
 @Component({
+  standalone: true,
   selector: 'app-key-up4',
   template: `
-    <input #box
-      (keyup.enter)="update(box.value)"
-      (blur)="update(box.value)">
+    <input #box (keyup.enter)="update(box.value)" (blur)="update(box.value)" />
 
-    <p>{{value}}</p>
-  `
+    <p>{{ value }}</p>
+  `,
 })
 export class KeyUpComponent_v4 {
   value = '';
-  update(value: string) { this.value = value; }
+  update(value: string) {
+    this.value = value;
+  }
 }
 // #enddocregion key-up-component-4

aio/content/examples/user-input/src/app/little-tour.component.ts

@@ -1,18 +1,25 @@
 // #docregion
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
 
 // #docregion little-tour
 @Component({
+  standalone: true,
   selector: 'app-little-tour',
   template: `
-    <input #newHero
+    <input
+      #newHero
       (keyup.enter)="addHero(newHero.value)"
-      (blur)="addHero(newHero.value); newHero.value='' ">
+      (blur)="addHero(newHero.value); newHero.value = ''"
+    />
 
     <button type="button" (click)="addHero(newHero.value)">Add</button>
 
-    <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
-  `
+    <ul>
+      <li *ngFor="let hero of heroes">{{ hero }}</li>
+    </ul>
+  `,
+  imports: [CommonModule],
 })
 export class LittleTourComponent {
   heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

aio/content/examples/user-input/src/app/loop-back.component.ts

@@ -1,12 +1,13 @@
 // #docregion
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 // #docregion loop-back-component
 @Component({
+  standalone: true,
   selector: 'app-loop-back',
   template: `
-    <input #box (keyup)="0">
-    <p>{{box.value}}</p>
-  `
+    <input #box (keyup)="(0)" />
+    <p>{{ box.value }}</p>
+  `,
 })
-export class LoopbackComponent { }
+export class LoopbackComponent {}
 // #enddocregion loop-back-component

aio/content/examples/user-input/src/main.ts

@@ -1,7 +1,7 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {bootstrapApplication, provideProtractorTestingSupport} from '@angular/platform-browser';
 
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+import {AppComponent} from './app/app.component';
 
+bootstrapApplication(AppComponent, {
+  providers: [provideProtractorTestingSupport()],
+});