docs(aio): update reactive-forms to CLI (#20019)

PR Close #20019

aio/content/examples/reactive-forms/debug.log

@@ -0,0 +1,3 @@
+[1030/162525.401:ERROR:process_reader_win.cc(123)] NtOpenThread: {Acceso denegado} Un proceso ha solicitado acceso a un objeto, pero no se le han concedido esos derechos de acceso.  (0xc0000022)
+[1030/162525.402:ERROR:exception_snapshot_win.cc(87)] thread ID 26896 not found in process
+[1030/162525.402:WARNING:crash_report_exception_handler.cc(62)] ProcessSnapshotWin::Initialize failed

aio/content/examples/reactive-forms/src/app/app.component.1.html

@@ -0,0 +1,4 @@
+<div class="container">
+  <h1>Reactive Forms</h1>
+  <app-hero-detail></app-hero-detail>
+</div>

aio/content/examples/reactive-forms/src/app/app.component.1.ts

@@ -1,12 +0,0 @@
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  template: `
-  <div class="container">
-    <h1>Reactive Forms</h1>
-    <app-hero-detail></app-hero-detail>
-  </div>`
-})
-export class AppComponent { }

aio/content/examples/reactive-forms/src/app/app.component.html

@@ -0,0 +1,4 @@
+<div class="container">
+  <h1>Reactive Forms</h1>
+  <app-hero-list></app-hero-list>
+</div>

aio/content/examples/reactive-forms/src/app/app.component.ts

@@ -3,10 +3,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
-  template: `
-  <div class="container">
-    <h1>Reactive Forms</h1>
-    <app-hero-list></app-hero-list>
-  </div>`
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent { }

aio/content/examples/reactive-forms/src/app/app.module.ts

@@ -6,9 +6,9 @@ import { BrowserModule }       from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';  // <-- #1 import module
 
 import { AppComponent }        from './app.component';
-import { HeroDetailComponent } from './hero-detail.component'; // <-- #1 import component
+import { HeroDetailComponent } from './hero-detail/hero-detail.component'; // <-- #1 import component
 // #enddocregion v1
-import { HeroListComponent }   from './hero-list.component';
+import { HeroListComponent }   from './hero-list/hero-list.component';
 
 import { HeroService }         from './hero.service'; //  <-- #1 import service
 // #docregion v1
@@ -20,7 +20,7 @@ import { HeroService }         from './hero.service'; //  <-- #1 import service
   ],
   declarations: [
     AppComponent,
-    HeroDetailComponent, // <-- #3 declare app component
+    HeroDetailComponent,
 // #enddocregion v1
     HeroListComponent
 // #docregion v1

aio/content/examples/reactive-forms/src/app/demo.module.ts

@@ -4,14 +4,14 @@ import { ReactiveFormsModule }  from '@angular/forms';
 
 import { AppModule }            from './app.module';
 import { DemoComponent }        from './demo.component';
-import { HeroDetailComponent1 } from './hero-detail-1.component';
-import { HeroDetailComponent2 } from './hero-detail-2.component';
-import { HeroDetailComponent3 } from './hero-detail-3.component';
-import { HeroDetailComponent4 } from './hero-detail-4.component';
-import { HeroDetailComponent5 } from './hero-detail-5.component';
-import { HeroDetailComponent6 } from './hero-detail-6.component';
-import { HeroDetailComponent7 } from './hero-detail-7.component';
-import { HeroDetailComponent8 } from './hero-detail-8.component';
+import { HeroDetailComponent1 } from './hero-detail/hero-detail-1.component';
+import { HeroDetailComponent2 } from './hero-detail/hero-detail-2.component';
+import { HeroDetailComponent3 } from './hero-detail/hero-detail-3.component';
+import { HeroDetailComponent4 } from './hero-detail/hero-detail-4.component';
+import { HeroDetailComponent5 } from './hero-detail/hero-detail-5.component';
+import { HeroDetailComponent6 } from './hero-detail/hero-detail-6.component';
+import { HeroDetailComponent7 } from './hero-detail/hero-detail-7.component';
+import { HeroDetailComponent8 } from './hero-detail/hero-detail-8.component';
 
 @NgModule({
   imports: [

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-1.component.ts

@@ -1,8 +1,9 @@
 /* tslint:disable:component-class-suffix */
-// #docregion imports
-import { Component }              from '@angular/core';
-import { FormControl }            from '@angular/forms';
-// #enddocregion
+
+import { Component } from '@angular/core';
+// #docregion import
+import { FormControl } from '@angular/forms';
+// #enddocregion import
 
 @Component({
   selector: 'app-hero-detail-1',

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.ts

@@ -3,7 +3,7 @@
 import { Component }                          from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import { states } from './data-model';
+import { states } from '../data-model';
 // #enddocregion imports
 
 @Component({

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.ts

@@ -2,7 +2,7 @@
 import { Component }                          from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import { states } from './data-model';
+import { states } from '../data-model';
 
 @Component({
   selector: 'app-hero-detail-5',

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts

@@ -5,7 +5,7 @@ import { Component, Input, OnChanges }             from '@angular/core';
 import { FormBuilder, FormGroup, Validators }      from '@angular/forms';
 
 // #docregion import-hero
-import { Hero, states } from './data-model';
+import { Hero, states } from '../data-model';
 // #enddocregion import-hero
 
 ////////// 6 ////////////////////

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts

@@ -5,7 +5,7 @@ import { Component, Input, OnChanges }             from '@angular/core';
 import { FormBuilder, FormGroup, Validators }      from '@angular/forms';
 
 // #docregion import-address
-import { Address, Hero, states } from './data-model';
+import { Address, Hero, states } from '../data-model';
 // #enddocregion import-address
 
 // #enddocregion imports

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts

@@ -3,7 +3,7 @@
 import { Component, Input, OnChanges }                   from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 
-import { Address, Hero, states } from './data-model';
+import { Address, Hero, states } from '../data-model';
 // #enddocregion imports
 
 @Component({

aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts

@@ -3,17 +3,16 @@
 import { Component, Input, OnChanges }       from '@angular/core';
 import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
 
-import { Address, Hero, states } from './data-model';
+import { Address, Hero, states } from '../data-model';
 // #docregion import-service
-import { HeroService }           from './hero.service';
+import { HeroService }           from '../hero.service';
 // #enddocregion import-service
 
-// #docregion metadata
 @Component({
   selector: 'app-hero-detail',
-  templateUrl: './hero-detail.component.html'
+  templateUrl: './hero-detail.component.html',
+  styleUrls: ['./hero-detail.component.css']
 })
-// #enddocregion metadata
 export class HeroDetailComponent implements OnChanges {
   @Input() hero: Hero;
 

aio/content/examples/reactive-forms/src/app/hero-list/hero-list.component.ts

@@ -3,12 +3,13 @@ import { Component, OnInit } from '@angular/core';
 import { Observable }        from 'rxjs/Observable';
 import 'rxjs/add/operator/finally';
 
-import { Hero }        from './data-model';
-import { HeroService } from './hero.service';
+import { Hero }        from '../data-model';
+import { HeroService } from '../hero.service';
 
 @Component({
   selector: 'app-hero-list',
-  templateUrl: './hero-list.component.html'
+  templateUrl: './hero-list.component.html',
+  styleUrls: ['./hero-list.component.css']
 })
 export class HeroListComponent implements OnInit {
   heroes: Observable<Hero[]>;

aio/content/examples/reactive-forms/src/index-final.html

@@ -5,10 +5,8 @@
     <title>Hero Form</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="styles.css">
-     <!-- #docregion bootstrap -->
     <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
-     <!-- #enddocregion bootstrap -->
+    <link rel="stylesheet" href="styles.css">
 
      <script src="node_modules/core-js/client/shim.min.js"></script>
 

aio/content/examples/reactive-forms/src/index.html

@@ -5,9 +5,7 @@
     <title>Hero Form</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-     <!-- #docregion bootstrap -->
     <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
-     <!-- #enddocregion bootstrap -->
   </head>
 
   <body>

aio/content/examples/reactive-forms/src/styles.1.css

@@ -0,0 +1 @@
+@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css');