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

PR Close #19248

aio/content/examples/attribute-directives/src/app/app.component.1.html

@@ -1,14 +1,14 @@
 <!-- #docregion -->
 <h1>My First Attribute Directive</h1>
 <!-- #docregion applied -->
-<p myHighlight>Highlight me!</p>
+<p appHightlight>Highlight me!</p>
 <!-- #enddocregion applied,  -->
 
 <!-- #docregion color-1 -->
-<p myHighlight highlightColor="yellow">Highlighted in yellow</p>
-<p myHighlight [highlightColor]="'orange'">Highlighted in orange</p>
+<p appHightlight highlightColor="yellow">Highlighted in yellow</p>
+<p appHightlight [highlightColor]="'orange'">Highlighted in orange</p>
 <!-- #enddocregion color-1 -->
 
 <!-- #docregion color-2 -->
-<p myHighlight [highlightColor]="color">Highlighted with parent component's color</p>
+<p appHightlight [highlightColor]="color">Highlighted with parent component's color</p>
 <!-- #enddocregion color-2 -->

aio/content/examples/attribute-directives/src/app/app.component.1.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.1.html'
 })
 // #docregion class

aio/content/examples/attribute-directives/src/app/app.component.html

@@ -8,11 +8,11 @@
   <input type="radio" name="colors" (click)="color='cyan'">Cyan
 </div>
 <!-- #docregion color -->
-<p [myHighlight]="color">Highlight me!</p>
+<p [appHighlight]="color">Highlight me!</p>
 <!-- #enddocregion color, v2 -->
 
 <!-- #docregion defaultColor -->
-<p [myHighlight]="color" defaultColor="violet">
+<p [appHighlight]="color" defaultColor="violet">
   Highlight me too!
 </p>
 <!-- #enddocregion defaultColor, -->
@@ -20,5 +20,5 @@
 <hr>
 <p><i>Mouse over the following lines to see fixed highlights</i></p>
 
-<p [myHighlight]="'yellow'">Highlighted in yellow</p>
-<p myHighlight="orange">Highlighted in orange</p>
+<p [appHighlight]="'yellow'">Highlighted in yellow</p>
+<p appHighlight="orange">Highlighted in orange</p>

aio/content/examples/attribute-directives/src/app/app.component.ts

@@ -2,7 +2,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'my-app',
+  selector: 'app-root',
   templateUrl: './app.component.html'
 })
 // #docregion class

aio/content/examples/attribute-directives/src/app/highlight.directive.1.ts

@@ -2,7 +2,7 @@
 // #docregion
 import { Directive, ElementRef, Input } from '@angular/core';
 
-@Directive({ selector: '[myHighlight]' })
+@Directive({ selector: '[appHighlight]' })
 export class HighlightDirective {
     constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'yellow';

aio/content/examples/attribute-directives/src/app/highlight.directive.2.ts

@@ -4,7 +4,7 @@
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[myHighlight]'
+  selector: '[appHighlight]'
 })
 export class HighlightDirective {
   // #docregion ctor

aio/content/examples/attribute-directives/src/app/highlight.directive.3.ts

@@ -3,13 +3,13 @@
 import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 
 @Directive({
-  selector: '[myHighlight]'
+  selector: '[appHighlight]'
 })
 export class HighlightDirective {
 
   constructor(private el: ElementRef) { }
 
-  @Input('myHighlight') highlightColor: string;
+  @Input('appHighlight') highlightColor: string;
 
   // #docregion mouse-enter
   @HostListener('mouseenter') onMouseEnter() {

aio/content/examples/attribute-directives/src/app/highlight.directive.ts

@@ -4,7 +4,7 @@ import { Directive, ElementRef, HostListener, Input } from '@angular/core';
 // #enddocregion imports
 
 @Directive({
-  selector: '[myHighlight]'
+  selector: '[appHighlight]'
 })
 export class HighlightDirective {
 
@@ -15,7 +15,7 @@ export class HighlightDirective {
   // #enddocregion defaultColor
 
   // #docregion color
-  @Input('myHighlight') highlightColor: string;
+  @Input('appHighlight') highlightColor: string;
   // #enddocregion color
 
   // #docregion mouse-enter

aio/content/examples/attribute-directives/src/index.html

@@ -1,25 +1,13 @@
 <!-- #docregion -->
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>Attribute Directives</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-
-    <!-- Polyfills -->
-    <script src="node_modules/core-js/client/shim.min.js"></script>
-
-    <script src="node_modules/zone.js/dist/zone.js"></script>
-    <script src="node_modules/systemjs/dist/system.src.js"></script>
-
-    <script src="systemjs.config.js"></script>
-    <script>
-      System.import('main.js').catch(function(err){ console.error(err); });
-    </script>
   </head>
   <body>
-    <my-app>loading...</my-app>
+    <app-root></app-root>
   </body>
 </html>

aio/content/examples/attribute-directives/src/main.ts

@@ -1,5 +1,12 @@
 // #docregion
+import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
 
 platformBrowserDynamic().bootstrapModule(AppModule);