title: Update parent component title from routed child component in Angular 2
body: <p>I'm working my way through the <a href="https://angular.io/docs/ts/latest/guide/router.html" rel="noreferrer">Angular 2 documentation on routing</a>.  I have a sample application which shows two components which are routed and hooked up to navigation links.  <a href="http://plnkr.co/edit/gDVvUS0An292xBcNuU9L?p=preview" rel="noreferrer">Here is a Plunker</a> demonstrating the behaviour.  It's built using Angular 2 in Typescript.</p>
  
  <p>Here is the main 'app.component.ts' code:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
  
  import {CrisisCenterComponent} from './crisis-center/crisis-center.component';
  import {HeroListComponent}     from './heroes/hero-list.component';
  import {HeroDetailComponent}   from './heroes/hero-detail.component';
  
  import {DialogService}         from './dialog.service';
  import {HeroService}           from './heroes/hero.service';
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;h1 class="title"&gt;Component Router&lt;/h1&gt;
      &lt;nav&gt;
        &lt;a [routerLink]="['CrisisCenter']"&gt;Crisis Center&lt;/a&gt;
        &lt;a [routerLink]="['Heroes']"&gt;Heroes&lt;/a&gt;
      &lt;/nav&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    providers:  [DialogService, HeroService],
    directives: [ROUTER_DIRECTIVES]
  })
  
  @RouteConfig([
  
    { // Crisis Center child route
      path: '/crisis-center/...',
      name: 'CrisisCenter',
      component: CrisisCenterComponent,
      useAsDefault: true
    },
  
    {path: '/heroes',   name: 'Heroes',     component: HeroListComponent},
    {path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent},
    {path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]}
  ])
  
  export class AppComponent { }
  </code></pre>
  
  <p>What I'm looking to do is replace the main (<code>&lt;h1&gt;</code>) heading 'Component Router' with the name of the 'view' that's being rendered.  So when you click 'Crisis Center' the heading should say 'Crisis Center'; when you click 'Heroes' the heading should say 'Heroes'.</p>
  
  <p>I don't want to move the heading into the child component templates - I want to keep it at the top of the HTML page and preferably only in one template.</p>
  
  <p>Can anyone suggest the best (most Angular-docs-like) way to accomplish this?</p>
  
  <p>Many thanks.</p>