Angular 2 Page Title Static and Dynamic with built-in Title Service

angular 2 document title angular 2 title service angular 2 title attribute angular2 router page title angular2 titleservice angular 2 router title angular2 meta tags angular title service angular universal title service

Angular 2 have a built-in service called Title, while in angularjs or angular 1 we were maintaining it through the routing or through the service. By using the Title service provided by Angular 2, in 2 minute every thing will be set without any complication, even we don't need to understand the login behind it. Enough talked let's see what we need and how to set it.

  1. We don't need to install any other third party service or directive.
  2. It is available in @angular/platform-browser
  3. We already using it for BrowserModule so just add Title

I have a project created by Angular-Cli, I will use this project for demo.

Open our app.module.ts file and adjust following lines

import { BrowserModule, Title } from '@angular/platform-browser';
........
........
providers: [..., Title],
bootstrap: [AppComponent]

Why we added title in providers?

It is recommended providing application-wide services in the root application component, AppComponent.

Now open our app.component.ts or whatever is our root component and adjust the code as follows:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  public constructor(private titleService: Title ) { }

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

See the setTitle method, it will automatically play for us.

Here is our app.compnent.html complete file:

  <div class="container">
      <router-outlet></router-outlet>
  </div>

Please don't ask me to explain these three lines.

Very important, remove the title from our index.html page otherwise it will not work.

Where are setting for title, we have not set yet. We don't need to define the till in our routing .

Simply open any component or page and add

<title>My New Title</title>

App Component Automatically read it and show the title in browser.

Till now we talked about the static titles what about the dynamic ones???

Let's say I have a page called blogdetail, it have nothing but a blank page to test

Add following lines according to your need

// In blog-detail component typescript file
title:string = 'Blog Detail Page';

ngOnInit() {
  // Take the data from database
  // Set the title now
  this.title = someObject.someProperty;
}

Put in Blog Detail Page HTML

<title>{{title}}</title>

I thing I am talking too much for this simple post.

Enjoy it.

For further detail if I missed anything, you can check this official page https://angular.io/docs/ts/latest/cookbook/set-document-title.html

Ali Adravi Having 10+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 8 years and still with the same company. Always ready to learn new technologies and tricks.
  • angular2
  • title-service
By Ali Adravi On 14 Apr, 17  Viewed: 49