docs(structural-components): add chapter

public/docs/_examples/structural-directives/ts/app/app.component.html

@@ -0,0 +1,13 @@
+<!-- #docregion -->
+<hero-dashboard [heroes]="heroes">
+  <!-- #docregion alert -->
+  <span (click)="updateAlert()" class="alert">{{ alert }}</span>
+  <!-- #enddocregion alert -->
+  <!-- #docregion template -->
+  <template #hero>
+    <hero-detail [hero]="hero"></hero-detail>
+  </template>
+  <!-- #enddocregion template -->
+</hero-dashboard>
+<!-- #enddocregion -->
+

public/docs/_examples/structural-directives/ts/app/app.component.ts

@@ -0,0 +1,34 @@
+// #docregion
+import {Component, Input}       from 'angular2/core';
+import {Hero}                   from './hero';
+import {HeroDetailComponent}    from './hero-detail.component';
+import {HeroDashboardComponent} from './hero-dashboard.component';
+
+@Component({
+  selector: 'my-app',
+  styles: ['button { min-width: 100px; }'],
+  templateUrl: 'app/app.component.html',
+  directives: [HeroDetailComponent, HeroDashboardComponent]
+})
+export class AppComponent {
+  heroes: Hero[] = [
+    { "id": 11, "name": "Mr. Nice", "status": "ready" },
+    { "id": 12, "name": "Narco", "status": "injured" },
+    { "id": 13, "name": "Bombasto", "status": "engaged" },
+    { "id": 14, "name": "Celeritas", "status": "travelling" },
+    { "id": 15, "name": "Magneta", "status": "injured" },
+    { "id": 16, "name": "RubberMan", "status": "ready" },
+    { "id": 17, "name": "Dynama", "status": "engaged" },
+    { "id": 18, "name": "Dr IQ", "status": "engaged" },
+    { "id": 19, "name": "Magma", "status": "travelling" },
+    { "id": 20, "name": "Tornado", "status": "ready" }
+  ];
+
+  // #docregion alert
+  alert = 'no alerts, everything normal.';
+
+  updateAlert() {
+    this.alert = 'under attack, recall all heroes to base!';
+  }
+  // #enddocregion alert
+}

public/docs/_examples/structural-directives/ts/app/hero-dashboard.component.1.html

@@ -0,0 +1,29 @@
+<!-- #docregion -->
+<h1>Heroes Dashboard</h1>
+<div>
+  HQ alerts:
+  <!-- alert goes here -->
+  <div>
+    <div class="status-grid">
+      <div class="status-lane">
+        <h3>Injured</h3>
+        <!-- injured heroes go here -->
+      </div>
+      <div class="status-lane">
+        <h3>Ready</h3>
+        <!-- ready heroes go here -->
+      </div>
+      <div class="status-lane">
+        <h3>Travelling</h3>
+        <!-- travelling heroes go here -->
+      </div>
+      <div class="status-lane">
+        <h3>Engaged</h3>
+        <!-- engaged heroes go here -->
+      </div>
+    </div>
+    <div>
+      <button (click)="recallAllHeroes()">Recall all Heroes</button>
+    </div>
+  </div>
+</div>

public/docs/_examples/structural-directives/ts/app/hero-dashboard.component.1.ts

@@ -0,0 +1,22 @@
+// #docplaster
+// #docregion
+import {Component, Input}    from 'angular2/core';
+import {Hero}                from './hero';
+import {HeroDetailComponent} from './hero-detail.component';
+import {HeroStatusPipe}      from './hero-status.pipe';
+
+@Component({
+  selector: 'hero-dashboard',
+  templateUrl: 'app/hero-dashboard.component.html',
+  styleUrls: ['app/hero-dashboard.css'],
+  pipes: [HeroStatusPipe]
+})
+export class HeroDashboardComponent {
+
+  @Input() heroes: Hero[];
+
+  recallAllHeroes() {
+    // call recall on all HeroDetail components
+  }
+}
+// #enddocregion

public/docs/_examples/structural-directives/ts/app/hero-dashboard.component.html

@@ -0,0 +1,37 @@
+<!-- #docregion -->
+<h1>Heroes Dashboard</h1>
+<div>
+  <!-- #docregion ng-content-alert -->
+  HQ alerts:
+  <ng-content select="span.alert"></ng-content>
+  <!-- #enddocregion ng-content-alert -->
+  <!-- #docregion ngFor-template -->
+  <div>
+    <div class="status-grid">
+      <div class="status-lane">
+        <h3>Injured</h3>
+        <template [ngForOf]="heroes | heroStatusPipe: 'injured'"
+          [ngForTemplate]="heroTmpl" ngFor></template>
+      </div>
+      <div class="status-lane">
+        <h3>Ready</h3>
+        <template [ngForOf]="heroes | heroStatusPipe: 'ready'"
+          [ngForTemplate]="heroTmpl" ngFor></template>
+      </div>
+      <div class="status-lane">
+        <h3>Travelling</h3>
+        <template [ngForOf]="heroes | heroStatusPipe: 'travelling'"
+          [ngForTemplate]="heroTmpl" ngFor></template>
+      </div>
+      <div class="status-lane">
+        <h3>Engaged</h3>
+        <template [ngForOf]="heroes | heroStatusPipe: 'engaged'"
+          [ngForTemplate]="heroTmpl" ngFor></template>
+      </div>
+    </div>
+    <div>
+      <button (click)="recallAllHeroes()">Recall all Heroes</button>
+    </div>
+  </div>
+  <!-- #enddocregion ngFor-template -->
+</div>

public/docs/_examples/structural-directives/ts/app/hero-dashboard.component.ts

@@ -0,0 +1,39 @@
+// #docplaster ...
+// #docregion
+import {Component, Input}    from 'angular2/core';
+import {Hero}                from './hero';
+import {HeroDetailComponent} from './hero-detail.component';
+import {HeroStatusPipe}      from './hero-status.pipe';
+// #docregion content-child
+import {ContentChild, TemplateRef} from 'angular2/core';
+// #enddocregion content-child
+// #docregion view-children
+import {ViewChildren, QueryList} from 'angular2/core';
+// #enddocregion view-children
+
+@Component({
+  selector: 'hero-dashboard',
+  templateUrl: 'app/hero-dashboard.component.html',
+  styleUrls: ['app/hero-dashboard.css'],
+  pipes: [HeroStatusPipe]
+})
+// #docregion content-child, view-children
+export class HeroDashboardComponent {
+  // #enddocregion view-children
+
+  @Input() heroes: Hero[];
+
+  @ContentChild(TemplateRef) heroTmpl: TemplateRef;
+
+  // #enddocregion content-child
+  // #docregion view-children
+  @ViewChildren(HeroDetailComponent) heroDetails: QueryList<HeroDetailComponent>;
+
+  recallAllHeroes() {
+    // call recall on all HeroDetail components
+    this.heroDetails.toArray().forEach(hd => hd.recall());
+  }
+  // #docregion content-child
+}
+// #enddocregion content-child, view-children
+// #enddocregion

public/docs/_examples/structural-directives/ts/app/hero-dashboard.css

@@ -0,0 +1,7 @@
+/* #docregion */
+
+.status-lane {
+  display: inline-block;
+  vertical-align: top;
+  padding: 1rem;
+}

public/docs/_examples/structural-directives/ts/app/hero-detail.component.ts

@@ -0,0 +1,29 @@
+// #docregion
+import {Component, Input} from 'angular2/core';
+import {Hero}             from './hero';
+
+@Component({
+  selector: 'hero-detail',
+  template: `
+    <div>
+      <span class="badge">{{hero.id}}</span>
+      {{hero.name}}
+      <span *ngIf="recalled" class="alert">(recalled)</span>
+    </div>
+  `,
+  styleUrls: ['app/hero-detail.css']
+})
+// #docregion recall
+export class HeroDetailComponent {
+// #enddocregion recall
+  @Input() hero: Hero;
+
+  recalled = false;
+  // #docregion recall
+  recall() {
+    this.recalled =
+      this.hero.status === 'travelling' ||
+      this.hero.status === 'engaged';
+  }
+}
+// #enddocregion recall

public/docs/_examples/structural-directives/ts/app/hero-detail.css

@@ -0,0 +1,15 @@
+/* #docregion */
+
+.badge {
+  font-size: small;
+  color: white;
+  padding: 0.1em 0.7em;
+  background-color: #369;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -1px;
+}
+.alert {
+  color: #F00;
+}

public/docs/_examples/structural-directives/ts/app/hero-status.pipe.ts

@@ -0,0 +1,10 @@
+// #docregion
+import {Pipe} from 'angular2/core';
+import {Hero} from './hero';
+
+@Pipe({ name: 'heroStatusPipe' })
+export class HeroStatusPipe {
+  transform(heroes: Hero[], args: string[]): Hero[] {
+    return heroes.filter((hero) => hero.status === args[0]);
+  }
+}

public/docs/_examples/structural-directives/ts/app/hero.ts

@@ -0,0 +1,6 @@
+// #docregion
+export class Hero {
+  id: number;
+  name: string;
+  status: string;
+}

public/docs/_examples/structural-directives/ts/app/my-component.component.html

@@ -0,0 +1,11 @@
+<!-- #docregion my-component-1 -->
+<my-component></my-component>
+<!-- #enddocregion my-component-1 -->
+<!-- #docregion my-component-2 -->
+<my-component [content]="'My data-bound content'"></my-component>
+<!-- #enddocregion my-component-2 -->
+<!-- #docregion my-component-3 -->
+<my-component>
+  <p>Declared Content; Kiss it Goodbye!</p>
+</my-component>
+<!-- #enddocregion my-component-3 -->

public/docs/_examples/structural-directives/ts/app/my-component.component.ts

@@ -0,0 +1,18 @@
+// #docregion
+import {Component, Input} from 'angular2/core';
+
+@Component({
+  selector: 'my-component',
+  template: '<p>{{content}}</p>'
+})
+export class MyComponent {
+  @Input() content='Component Template Content';
+}
+// #enddocregion
+
+@Component({
+  selector: 'my-component-host',
+  templateUrl: 'app/my-component.component.html',
+  directives:[MyComponent]
+})
+export class MyComponentHost { }

public/docs/_examples/structural-directives/ts/app/structural-directives.component.html

@@ -107,3 +107,11 @@ <h4>heavy-loader log:</h4>
 </template>
 <!-- #enddocregion ngFor-template -->
 <!-- #enddocregion -->
+
+<hr>
+
+<my-app>Loading my-app ...</my-app>
+
+<hr>
+
+<my-component-host>Loading my-component ...</my-component-host>

public/docs/_examples/structural-directives/ts/app/structural-directives.component.ts

@@ -3,12 +3,14 @@
 import {Component, Input, Output} from 'angular2/core';
 import {UnlessDirective}          from './unless.directive';
 import {HeavyLoaderComponent}     from './heavy-loader.component';
+import {MyComponentHost}          from './my-component.component';
+import {AppComponent}             from './app.component';
 
 @Component({
   selector: 'structural-directives',
   templateUrl: 'app/structural-directives.component.html',
   styles: ['button { min-width: 100px; }'],
-  directives: [UnlessDirective, HeavyLoaderComponent]
+  directives: [UnlessDirective, HeavyLoaderComponent, MyComponentHost, AppComponent]
 })
 export class StructuralDirectivesComponent {
   heroes = ['Mr. Nice', 'Narco', 'Bombasto'];

public/docs/ts/latest/guide/_data.json

@@ -56,7 +56,7 @@
     "nextable": true,
     "basics": true
   },
-  
+
   "attribute-directives": {
     "title": "Attribute Directives",
     "intro": "Attribute directives attach behavior to elements."
@@ -103,11 +103,16 @@
     "intro": "Techniques and practices for testing an Angular 2 app"
   },
 
+  "hierarchical-dependency-injection": {
+    "title": "Hierarchical Injectors",
+    "intro": "Angular's hierarchical dependency injection system supports nested injectors in parallel with the component tree."
+  },
+
   "typescript-configuration": {
     "title": "TypeScript Configuration",
     "intro": "TypeScript configuration for Angular 2 developers"
   },
-  
+
   "upgrade": {
     "title": "Upgrading from 1.x",
     "intro": "Angular 1 applications can be incrementally upgraded to Angular 2."