how to change page title in angular2 router

Question

I am trying to change the page title from the router, can this be done?

import {RouteConfig} from \'angular2/router\';
@RouteConfig([
  {path: \'/home\', com         


        

Answer 1

Its really very easy to do this, you can follow therse steps to see the immediate effects:

we provide the Title service in bootstrap:

import { NgModule } from '@angular/core';
import { BrowserModule, Title }  from '@angular/platform-browser';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    Title
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Then import this service in the component you want:

import { Component } from '@angular/core';
import { Title }     from '@angular/platform-browser';

@Component({
selector: 'my-app',
template:
  `

    Select a title to set on the current HTML document:
  

  

    
Good morning.
    
Good afternoon.
    
Good evening.
  
  `
})
export class AppComponent {
  public constructor(private titleService: Title ) { }

  public setTitle( newTitle: string) {
    this.titleService.setTitle( newTitle );
  }
}

now click on those links to see the title changing.

you can also use ng2-meta for changing page title and description as well,you can refer to this link:

https://github.com/vinaygopinath/ng2-meta