From e4d2018f46d5b08d1de4e9f8d22fa294c0878286 Mon Sep 17 00:00:00 2001
From: Ben Hong <ben@bencodezen.io>
Date: Mon, 28 Aug 2023 09:06:57 -0700
Subject: [PATCH] docs: migrate user-input code example to standalone (#51466)

PR Close #51466
---
 .../user-input/src/app/app.component.ts       | 27 ++++++++--
 .../examples/user-input/src/app/app.module.ts | 37 --------------
 .../user-input/src/app/click-me.component.ts  |  8 +--
 .../user-input/src/app/click-me2.component.ts | 12 ++---
 .../user-input/src/app/keyup.components.ts    | 51 +++++++++++--------
 .../src/app/little-tour.component.ts          | 17 +++++--
 .../user-input/src/app/loop-back.component.ts | 11 ++--
 aio/content/examples/user-input/src/main.ts   | 10 ++--
 8 files changed, 86 insertions(+), 87 deletions(-)
 delete mode 100644 aio/content/examples/user-input/src/app/app.module.ts

diff --git a/aio/content/examples/user-input/src/app/app.component.ts b/aio/content/examples/user-input/src/app/app.component.ts
index abbfa28cb12..b7c90230c1e 100644
--- a/aio/content/examples/user-input/src/app/app.component.ts
+++ b/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 {}
diff --git a/aio/content/examples/user-input/src/app/app.module.ts b/aio/content/examples/user-input/src/app/app.module.ts
deleted file mode 100644
index 9f9ac5a38fd..00000000000
--- a/aio/content/examples/user-input/src/app/app.module.ts
+++ /dev/null
@@ -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 { }
diff --git a/aio/content/examples/user-input/src/app/click-me.component.ts b/aio/content/examples/user-input/src/app/click-me.component.ts
index 49afa884a11..c9a2011092d 100644
--- a/aio/content/examples/user-input/src/app/click-me.component.ts
+++ b/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 = '';
diff --git a/aio/content/examples/user-input/src/app/click-me2.component.ts b/aio/content/examples/user-input/src/app/click-me2.component.ts
index 46184c880f0..b8e3c082846 100644
--- a/aio/content/examples/user-input/src/app/click-me2.component.ts
+++ b/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}`;
   }
 }
diff --git a/aio/content/examples/user-input/src/app/keyup.components.ts b/aio/content/examples/user-input/src/app/keyup.components.ts
index e3a38405ed0..ac64975ef16 100644
--- a/aio/content/examples/user-input/src/app/keyup.components.ts
+++ b/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
diff --git a/aio/content/examples/user-input/src/app/little-tour.component.ts b/aio/content/examples/user-input/src/app/little-tour.component.ts
index 124ba8ca0d3..89218ecc22f 100644
--- a/aio/content/examples/user-input/src/app/little-tour.component.ts
+++ b/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'];
diff --git a/aio/content/examples/user-input/src/app/loop-back.component.ts b/aio/content/examples/user-input/src/app/loop-back.component.ts
index 229123f3de5..d23b46012bd 100644
--- a/aio/content/examples/user-input/src/app/loop-back.component.ts
+++ b/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
diff --git a/aio/content/examples/user-input/src/main.ts b/aio/content/examples/user-input/src/main.ts
index 1e3bab6e5eb..46d4cf88707 100644
--- a/aio/content/examples/user-input/src/main.ts
+++ b/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()],
+});