docs(template-syntax/structural-directives): refresh both guides

Also describe <ng-content>

Author: kapunahelewong

public/docs/_examples/ngcontainer/ts/app/app.component.css renamed to public/docs/_examples/ngcontainer/ts/src/app/app.component.css

@@ -126,8 +126,8 @@ <h4>#1 &lt;ng-container&gt; and &lt;options&gt;</h4>
 
 <p><i>&lt;select&gt; with &lt;span&gt;</i></p>
 <div>
-  Pick your favorite hero, who is
-  <label><input type="checkbox" checked (change)="showSad=!showSad">not sad</label>
+  Pick your favorite hero
+  (<label><input type="checkbox" checked (change)="showSad=!showSad">show sad</label>)
 </div>
 <!-- #docregion select-span -->
 <select [(ngModel)]="hero">
@@ -141,8 +141,8 @@ <h4>#1 &lt;ng-container&gt; and &lt;options&gt;</h4>
 
 <p><i>&lt;select&gt; with &lt;ng-container&gt;</i></p>
 <div>
-  Pick your favorite hero, who is
-  <label><input type="checkbox" checked (change)="showSad=!showSad">not sad</label>
+  Pick your favorite hero
+  (<label><input type="checkbox" checked (change)="showSad=!showSad">show sad</label>)
 </div>
 <!-- #docregion select-ngcontainer -->
 <select [(ngModel)]="hero">

public/docs/_examples/ngcontainer/ts/app/app.component.html renamed to public/docs/_examples/ngcontainer/ts/src/app/app.component.html

@@ -5,12 +5,14 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }     from './app.component';
 import { ContentComponent } from './content.component';
+import { heroComponents } from './hero.components';
 
 @NgModule({
   imports: [ BrowserModule, FormsModule ],
   declarations: [
     AppComponent,
-    ContentComponent
+    ContentComponent,
+    heroComponents
   ],
   bootstrap: [ AppComponent ]
 })

public/docs/_examples/ngcontainer/ts/app/app.component.ts renamed to public/docs/_examples/ngcontainer/ts/src/app/app.component.ts

@@ -5,7 +5,7 @@ export class Hero {
   emotion?: string;
 }
 
-export const heroes = [
+export const heroes: Hero[] = [
   { id: 1, name: 'Mr. Nice',  emotion: 'happy'},
   { id: 2, name: 'Narco',     emotion: 'sad' },
   { id: 3, name: 'Windstorm', emotion: 'confused' },

public/docs/_examples/ngcontainer/ts/app/app.module.ts renamed to public/docs/_examples/ngcontainer/ts/src/app/app.module.ts

@@ -7,15 +7,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="styles.css">
 
-    <!-- Polyfills for older browsers -->
+    <!-- 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('app').catch(function(err){ console.error(err); });
+      System.import('main.js').catch(function(err){ console.error(err); });
     </script>
   </head>
 

public/docs/_examples/ngcontainer/ts/app/content.component.ts renamed to public/docs/_examples/ngcontainer/ts/src/app/content.component.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app.module';
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);
 

public/docs/_examples/ngcontainer/ts/app/hero.components.ts renamed to public/docs/_examples/ngcontainer/ts/src/app/hero.components.ts

@@ -90,8 +90,8 @@ <h4>*ngIf with a &lt;ng-container&gt;</h4>
 <p><i>&lt;select&gt; with &lt;span&gt;</i></p>
 <!-- #docregion select-span -->
 <div>
-  Pick your favorite hero, who is
-  <label><input type="checkbox" checked (change)="showSad = !showSad">not sad</label>
+  Pick your favorite hero
+  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
 </div>
 <select [(ngModel)]="hero">
   <span *ngFor="let h of heroes">
@@ -105,8 +105,8 @@ <h4>*ngIf with a &lt;ng-container&gt;</h4>
 <p><i>&lt;select&gt; with &lt;ng-container&gt;</i></p>
 <!-- #docregion select-ngcontainer -->
 <div>
-  Pick your favorite hero, who is
-  <label><input type="checkbox" checked (change)="showSad = !showSad">not sad</label>
+  Pick your favorite hero
+  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
 </div>
 <select [(ngModel)]="hero">
   <ng-container *ngFor="let h of heroes">
@@ -212,7 +212,7 @@ <h2>&lt;template&gt;</h2>
 
 <hr>
 
-<h2 id="myUnless">[myUnless]</h2>
+<h2 id="myUnless">UnlessDirective</h2>
 <p>
   The condition is currently
   <span [ngClass]="{ a: !condition, b: condition, unless: true }">{{condition}}</span>.
@@ -234,7 +234,7 @@ <h2 id="myUnless">[myUnless]</h2>
 <!-- #enddocregion myUnless-->
 
 
-<h4>MyUnlessDirective with template</h4>
+<h4>UnlessDirective with template</h4>
 
 <!-- #docregion myUnless-1 -->
 <p *myUnless="condition">Show this sentence unless the condition is true.</p>

public/docs/_examples/ngcontainer/ts/app/hero.ts renamed to public/docs/_examples/ngcontainer/ts/src/app/hero.ts

@@ -5,14 +5,14 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent }         from './app.component';
 import { heroSwitchComponents } from './hero-switch.components';
-import { MyUnlessDirective }    from './my-unless.directive';
+import { UnlessDirective }    from './unless.directive';
 
 @NgModule({
   imports: [ BrowserModule, FormsModule ],
   declarations: [
     AppComponent,
     heroSwitchComponents,
-    MyUnlessDirective
+    UnlessDirective
   ],
   bootstrap: [ AppComponent ]
 })

public/docs/_examples/ngcontainer/ts/index.html renamed to public/docs/_examples/ngcontainer/ts/src/index.html

@@ -5,7 +5,7 @@ export class Hero {
   emotion?: string;
 }
 
-export const heroes = [
+export const heroes: Hero[] = [
   { id: 1, name: 'Mr. Nice',  emotion: 'happy'},
   { id: 2, name: 'Narco',     emotion: 'sad' },
   { id: 3, name: 'Windstorm', emotion: 'confused' },