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.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

Example App

Create a new angular app.

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

home.component.ts

one.component.ts

two.component.ts

three.component.ts

two-a.component.ts

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


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

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.

Listen to Navigation Changes

The trick to change 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

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 the Angular Routes.

3 thoughts on “Dynamic Page Title based on Route in Angular”

  1. 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

    1. TekTutorialsHub

      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.

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top