This tutorial explains how to set the page title using the title service in Angular apps using an example. The title service allows us the change the HTML title of the application with ease.
Changing the page title is very important as it helps search engines to know the purpose of the page and index it properly. It also helps users to know, which page they are in.
Being a single-page app, the angular does not reload the entire page. The page loads only once at the startup. Only part of the page gets loaded when you navigate from one route to another.
The title of the page is set in the index.html as shown below. We use the HTML title tag to set the title of the app. Since it is loaded only at the start, all other pages or routes get the same title.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Service Example</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
We can make use of the title service in angular to make changes to the document title
import { BrowserModule, Title } from '@angular/platform-browser';
If you are using any other platform like NativeScript for mobile apps, you need a different service. The service, which understands the platform.
Like all other Angular services, we need to register the title service with the Angular Providers in the root Angular module.
@NgModule({
declarations: [
],
imports: [
BrowserModule,
],
providers: [
Title //Register the Service
],
bootstrap: [AppComponent]
})
export class AppModule { }
Inject the title service, like all other Angular Services in the component using Dependency Injection
export class TitleComponent implements OnInit {
constructor(private title:Title) { }
}
The title service provides only two methods. SetTitle & GetTitle. We use SetTitle to set the title of the page and GetTitle to find out the current title of the page.
ngOnInit() {
this.title.setTitle("How to use title service in Angular")
}
That’s it.
The following is the example app, which has three components. Each component uses the setTitle method of the Title service to set the title of each component.
app.module.ts
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OneComponent } from './one.component';
import { TwoComponent } from './two-component';
import { ThreeComponent } from './three.component';
@NgModule({
declarations: [
AppComponent,OneComponent,TwoComponent,ThreeComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [Title],
bootstrap: [AppComponent]
})
export class AppModule { }
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OneComponent } from './one.component';
import { TwoComponent } from './two-component';
import { ThreeComponent } from './three.component';
const routes: Routes = [
{path: 'one', component:OneComponent},
{path: 'two', component:TwoComponent},
{path: 'three', component:ThreeComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
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 {
title = 'title Service Example';
constructor(private titleService:Title) {
}
ngOnInit() {
this.titleService.setTitle(this.title);
}
}
<h1>Angular Title Service Example</h1>
<ul>
<li><a [routerLink]="['/one']">One</a> </li>
<li><a [routerLink]="['/two']">two</a> </li>
<li><a [routerLink]="['/three']">three</a> </li>
</ul>
<router-outlet></router-outlet>
@Component({
template: `<h1>One Component</h1>`
})
export class OneComponent implements OnInit {
title = 'One Component Title';
constructor(private titleService:Title){
}
ngOnInit() {
this.titleService.setTitle(this.title);
}
}
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
template: `<h1>Two Component</h1>`
})
export class TwoComponent implements OnInit {
title = 'Two Component Title';
constructor(private titleService:Title) {
}
ngOnInit() {
this.titleService.setTitle(this.title);
}
}
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
template: `<h1>Three Component</h1>`
})
export class ThreeComponent implements OnInit {
title = 'Three Component Title';
constructor(private titleService:Title){}
ngOnInit() {
this.titleService.setTitle(this.title);
}
}
We learned how to make use of the Title service in Angular
