Dynamic Page Title based on Route in Angular

Learn how to set dynamic page title based on Route in Angular using Title Service in Angular. We learned how to is set the page title using the Title service in Angular. Setting the title in each component is somewhat a tedious task. You may miss some of the components. The simpler solution is to define the title along with the routes and use it to update the title. To achieve that, we will make use of Angular route data Property.

Table of Contents

Example App
Summary

Example App

Create a new angular app.

Add five Angular Components. HomeComponent, OneComponent, TwoComponent, ThreeComponent & TwoAComponent

home.component.ts

import { Component} from '@angular/core';

@Component({

})

export class HomeComponent {

}

one.component.ts

import { Component } from '@angular/core';

@Component({

})

export class OneComponent{

}

two.component.ts

import { Component} from '@angular/core';

@Component({

<router-outlet></router-outlet>

})

export class TwoComponent {

}

three.component.ts

import { Component} from '@angular/core';

@Component({

})

export class ThreeComponent {

}

two-a.component.ts

import { Component } from '@angular/core';

@Component({

})

export class TwoAComponent {

}

Import Title Service

Open the app.module.ts and import the Title Service form the @angular/platform-browser as shown below. Also, use the Angular Providers metadata to register the Title service

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';

import { TwoAComponent } from './two-a.component';

import { HomeComponent } from './home.component';

@NgModule({

declarations: [

AppComponent,OneComponent,TwoComponent,ThreeComponent,TwoAComponent, HomeComponent

imports: [

BrowserModule,

AppRoutingModule

providers: [Title],

bootstrap: [AppComponent]

})

export class AppModule { }

Define the title in Routes

Open the app-routing.module.ts and the routes as shown below. Add the title property in route data. Route data can be used to pass the static data or dynamic data to routed components.

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';

import { TwoAComponent } from './two-a.component';

import { HomeComponent } from './home.component';

const routes: Routes = [

{path:'',component:HomeComponent, data : {title:'Title for Home Component'}},

{path: 'one', component:OneComponent, data :{ title:'Title for One Component'}},

{path: 'two', component:TwoComponent,

data :{ title:'Title for Two Component'},

children: [

{path:'a',component:TwoAComponent, data : {title:'title for two a component'}}

]

{path: 'three', component:ThreeComponent, data :{ title:'Title for three Component'}},

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Listen to Navigation Changes

The trick to changing the title is to know when the route changes. This we can do by listening to the NavigationEnd event.

We also need to listen to every route change event in the app. The app.component.ts is the topmost component in our app. It loads when the app starts. It lives as long as the app lives. Hence the best place to listen to the route changes is in the app.component.ts

The following is the code of the app.component.ts

import { Component } from '@angular/core';

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

import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import { filter, map } from 'rxjs/operators';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

constructor(private router: Router,

private activatedRoute: ActivatedRoute,

private titleService: Title) {

}

ngOnInit() {

this.router.events.pipe(

filter(event => event instanceof NavigationEnd),

)

.subscribe(() => {

var rt = this.getChild(this.activatedRoute)

rt.data.subscribe(data => {

console.log(data);

this.titleService.setTitle(data.title)})

})

}

getChild(activatedRoute: ActivatedRoute) {

if (activatedRoute.firstChild) {

return this.getChild(activatedRoute.firstChild);

} else {

return activatedRoute;

}

First, we inject Router, ActivatedRoute & Title services in our constructor

In ngOnInit, we listen to the router events. We use the filter operator to listen to only to the NavigationEnd event.

We need to find the ActivateRoute of the last loaded component. Hence, we use the firstChild property of the ActivatedRoute to recursively traverse through the Router Tree to get the bottom-most Activate Route. We use the getChild method to do that.

Once, we get the ActivateRoute of the last loaded component, all we need to do is subscribe to the Route, data to get the title stored in the route data.

Finally, use the setTitle of the Title service to set the Title tag

Summary

We learned how to set the dynamic page title by using Angular Routes.

Title Service

Angular Tutorial

Meta Service

Sebastian

April 6, 2022 at 7:11 pm

Helped. Thank you. The attribute “data” was the key and as value I could use the pattern:
“FILENAME.KEY.SUBKEY.VALUE”, e.g. “global.mymod.users.title”: “Benutzer”.

Anonymous

August 18, 2021 at 10:58 am

Very very good.

Amruta W

June 15, 2020 at 4:09 pm

The example is good and easy to understand.

I have some similar scenario like I have department component, employee component and roles component, in this component i will display the related details. Like whenever i navigate to employee component my browser title should display information like “Employee Name: Employee Number”, if i navigate to dpeartment component browser title should display information like “Department Name: Department Number”

Can you please suggest how to achieve this in generic way instead of setting title in each component.

Thanks & Regards
Amruta W

TekTutorialsHub
June 16, 2020 at 3:39 pm
That’s tricky to achieve because the employee name is available only after the route change event. Setting it in the component seems to be the best & simple solution.
1. Amruta W
  June 16, 2020 at 5:27 pm
  You mean to say is I have to set in each component?

Dynamic Page Title based on Route in Angular