diff --git a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts index f7b4100cee..82a817fa5a 100644 --- a/public/docs/_examples/toh-6/ts/app/dashboard.component.ts +++ b/public/docs/_examples/toh-6/ts/app/dashboard.component.ts @@ -1,5 +1,6 @@ // #docplaster // #docregion +// #docregion hero-search-component import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @@ -13,6 +14,7 @@ import { HeroSearchComponent } from './hero-search.component'; styleUrls: ['app/dashboard.component.css'], directives: [HeroSearchComponent] }) +// #enddocregion hero-search-component export class DashboardComponent implements OnInit { heroes: Hero[] = []; diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade index 6e3fa96c65..104c8575fe 100644 --- a/public/docs/ts/latest/tutorial/toh-pt6.jade +++ b/public/docs/ts/latest/tutorial/toh-pt6.jade @@ -492,9 +492,21 @@ block observables-section :marked We load them all at once by importing `rxjs-extensions` in `AppComponent`. - +makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app/app.component.ts')(format=".") + +makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app.component.ts')(format=".") + + :marked + ### Adding the search component to the dashboard + + We add the `HeroSearchComponent` to the bottom of the `DashboardComponent` template. + + +makeExample('toh-6/ts/app/dashboard.component.html', null, 'dashboard.component.html') + + :marked + And finally, we import the `HeroSearchComponent` and add it to the `directives` array. + + +makeExcerpt('app/dashboard.component.ts', 'hero-search-component') + :marked - Finally, we add the `HeroSearchComponent` to the bottom of the `DashboardComponent`. Run the app again, go to the *Dashboard*, and enter some text in the search box below the hero tiles. At some point it might look like this.