build(aio): change examples to CLI (#19248)

PR Close #19248

aio/content/examples/dependency-injection/src/app/app.component.1.ts

@@ -4,11 +4,11 @@
 import { Component }         from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <h1>{{title}}</h1>
-    <my-car></my-car>
-    <my-heroes></my-heroes>
+    <app-car></app-car>
+    <app-heroes></app-heroes>
   `
 })
 

aio/content/examples/dependency-injection/src/app/app.component.2.ts

@@ -7,11 +7,11 @@ import { APP_CONFIG, AppConfig }    from './app.config';
 // #enddocregion imports
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template: `
     <h1>{{title}}</h1>
-    <my-car></my-car>
-    <my-heroes></my-heroes>
+    <app-car></app-car>
+    <app-heroes></app-heroes>
   `
 })
 export class AppComponent {

aio/content/examples/dependency-injection/src/app/app.component.ts

@@ -9,20 +9,20 @@ import { UserService } from './user.service';
 // #enddocregion imports
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   template:  `
     <h1>{{title}}</h1>
-    <my-car></my-car>
-    <my-injectors></my-injectors>
-    <my-tests></my-tests>
+    <app-car></app-car>
+    <app-injectors></app-injectors>
+    <app-tests></app-tests>
     <h2>User</h2>
     <p id="user">
       {{userInfo}}
       <button (click)="nextUser()">Next User</button>
     <p>
-    <my-heroes id="authorized" *ngIf="isAuthorized"></my-heroes>
-    <my-heroes id="unauthorized" *ngIf="!isAuthorized"></my-heroes>
-    <my-providers></my-providers>
+    <app-heroes id="authorized" *ngIf="isAuthorized"></app-heroes>
+    <app-heroes id="unauthorized" *ngIf="!isAuthorized"></app-heroes>
+    <app-providers></app-providers>
   `,
   providers: [Logger]
 })

aio/content/examples/dependency-injection/src/app/car/car.component.ts

@@ -13,7 +13,7 @@ import { useInjector }        from './car-injector';
 
 
 @Component({
-  selector: 'my-car',
+  selector: 'app-car',
   template: `
   <h2>Cars</h2>
   <div id="di">{{car.drive()}}</div>

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.1.ts

@@ -4,7 +4,7 @@ import { Component }   from '@angular/core';
 import { HEROES }      from './mock-heroes';
 
 @Component({
-  selector: 'hero-list',
+  selector: 'app-hero-list',
   template: `
   <div *ngFor="let hero of heroes">
     {{hero.id}} - {{hero.name}}

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.2.ts

@@ -13,7 +13,7 @@ import { HeroService } from './hero.service';
 // #docregion
 
 @Component({
-  selector: 'hero-list',
+  selector: 'app-hero-list',
   template: `
   <div *ngFor="let hero of heroes">
     {{hero.id}} - {{hero.name}}

aio/content/examples/dependency-injection/src/app/heroes/hero-list.component.ts

@@ -6,7 +6,7 @@ import { Hero }        from './hero';
 import { HeroService } from './hero.service';
 
 @Component({
-  selector: 'hero-list',
+  selector: 'app-hero-list',
   template: `
   <div *ngFor="let hero of heroes">
     {{hero.id}} - {{hero.name}}

aio/content/examples/dependency-injection/src/app/heroes/heroes.component.1.ts

@@ -9,13 +9,13 @@ import { HeroService }        from './hero.service';
 // #docregion full, v1
 
 @Component({
-  selector: 'my-heroes',
+  selector: 'app-heroes',
     // #enddocregion v1
   providers: [HeroService],
   // #docregion v1
   template: `
   <h2>Heroes</h2>
-  <hero-list></hero-list>
+  <app-hero-list></app-hero-list>
   `
 })
 export class HeroesComponent { }

aio/content/examples/dependency-injection/src/app/heroes/heroes.component.ts

@@ -4,10 +4,10 @@ import { Component }          from '@angular/core';
 import { heroServiceProvider } from './hero.service.provider';
 
 @Component({
-  selector: 'my-heroes',
+  selector: 'app-heroes',
   template: `
   <h2>Heroes</h2>
-  <hero-list></hero-list>
+  <app-hero-list></app-hero-list>
   `,
   providers: [heroServiceProvider]
 })

aio/content/examples/dependency-injection/src/app/injector.component.ts

@@ -10,7 +10,7 @@ import { Logger }               from './logger.service';
 
 // #docregion injector
 @Component({
-  selector: 'my-injectors',
+  selector: 'app-injectors',
   template: `
   <h2>Other Injections</h2>
   <div id="car">{{car.drive()}}</div>

aio/content/examples/dependency-injection/src/app/providers.component.ts

@@ -249,7 +249,7 @@ export class Provider10Component implements OnInit {
 
 /////////////////
 @Component({
-  selector: 'my-providers',
+  selector: 'app-providers',
   template: `
   <h2>Provider variations</h2>
   <div id="p1"><provider-1></provider-1></div>

aio/content/examples/dependency-injection/src/app/test.component.ts

@@ -8,7 +8,7 @@ import { HeroService }         from './heroes/hero.service';
 import { HeroListComponent }   from './heroes/hero-list.component';
 
 @Component({
-  selector: 'my-tests',
+  selector: 'app-tests',
   template: `
     <h2>Tests</h2>
     <p id="tests">Tests {{results.pass}}: {{results.message}}</p>