hangouts updates with Ward

Author: kapunahelewong

public/docs/_examples/reactive-forms/ts/app/app.component.html

@@ -1,14 +1,12 @@
-// #docplaster
 // #docregion
-// #docregion app-comp-ts
 import { Component } from '@angular/core';
 
 @Component({
   moduleId: module.id,
     selector: 'my-app',
-    templateUrl: './app.component.html'
+    template: `
+      <div class="container">
+        <reactive-form></reactive-form>
+      </div>`
 })
 export class AppComponent { }
-
-// #enddocregion app-comp-ts
-// #enddocregion

public/docs/_examples/reactive-forms/ts/app/app.component.spec.ts

@@ -1,30 +1,20 @@
 // #docplaster
 // #docregion
-// #docregion app-module
-// #docregion reactive-imports
 import { NgModule }            from '@angular/core';
 import { BrowserModule }       from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';  // <-- #1 import the module
-import { AppComponent }          from './app.component';
-import { ReactiveFormComponent } from './reactive-form.component';
-// #enddocregion reactive-imports
+import { AppComponent }        from './app.component';
+import { HeroSignUpComponent } from './hero-signup.component';
 
-// #docregion add-reactive-forms-module
 @NgModule({
   imports: [
     BrowserModule,
     ReactiveFormsModule // <-- #2 add to Angular module imports
   ],
   declarations: [
     AppComponent,
-// #enddocregion add-reactive-forms-module
-    ReactiveFormComponent // <-- psst...while you're in here, declare the ReactiveFormComponent
-// #docregion add-reactive-forms-module
+    HeroSignUpComponent // <-- #3 declare the HeroSignUpComponent
   ],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }
-// #enddocregion add-reactive-forms-module
-// #enddocregion app-module
-
-// #docregion

public/docs/_examples/reactive-forms/ts/app/app.component.ts

@@ -14,7 +14,7 @@ import { AbstractControl, FormControl, FormGroup, FormBuilder} from '@angular/fo
 @Component({
   moduleId: module.id,
   selector: 'reactive-form',
-  templateUrl: './reactive-forms.component.html'
+  templateUrl: './hero-signup.component.1.html'
 })
 // #enddocregion reactive-comp-metadata-v1
 

public/docs/_examples/reactive-forms/ts/app/app.module.ts

@@ -15,11 +15,11 @@ function passwordMatcher(c: AbstractControl) {
 @Component({
   moduleId: module.id,
   selector: 'reactive-form',
-  templateUrl: './reactive-form.component.html'
+  templateUrl: './hero-signup.component.html'
 })
 // #enddocregion reactive-comp-metadata
 // #docregion form-array-class
-export class ReactiveFormComponent {
+export class HeroSignUpComponent {
 
   form: FormGroup;
   addresses: FormArray;

public/docs/_examples/reactive-forms/ts/app/hero-signup-v1.component.html renamed to public/docs/_examples/reactive-forms/ts/app/hero-signup.component.1.html

@@ -1,15 +1,17 @@
 
-// #docplaster
-// #docregion
-// #docregion const
-const myControl = new FormControl();
-// #enddocregion const
-
-// #docregion inspect
-myControl.value
-myControl.status
-myControl.valid
-myControl.pristine
-myControl.untouched
-// #docregion inspect
+import { FormControl } from '@angular/forms';
+
+export class Snippets {
+  // #docregion const
+  const myControl = new FormControl();
+  // #enddocregion const
+
+  // #docregion inspect
+  myControl.value;
+  myControl.status;
+  myControl.valid;
+  myControl.pristine;
+  myControl.untouched;
+  // #docregion inspect
+}
 

public/docs/_examples/reactive-forms/ts/app/hero-signup-v1.component.ts renamed to public/docs/_examples/reactive-forms/ts/app/hero-signup.component.1.ts

@@ -113,7 +113,7 @@ a#update
 
   Update `app.component.ts` by adding `moduleId: module.id` to the `@Component` decorator so you can use a [relative path](./cookbook/component-relative-paths.html) to get to the `templateUrl` which is the `app.component.html` file you just created.
 
-+makeExample('reactive-forms/ts/app/app.component.ts', 'app-comp-ts','app/app.component.ts')(format=".")
++makeExample('reactive-forms/ts/app/app.component.ts', '','app/app.component.ts')(format=".")
 
 :marked
   It’s working but to give it some style, add bootstrap by putting this in the head of `index.html`: