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

Also describe <ng-content>

Author: wardbell

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);