How to change title of a page using angular(angular 2 or 4) route?

Viewed 17236

I want to change the title of the page whenever I click or browse the link from the URL bar. How to change that using Angular route? I am using angular version 4 and angular cli.

4 Answers

You can to use @angular/plateform-browser to use the setTitle():

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

@Component({
  selector: 'your-component',
})

export class YourComponent implements onInit {
  constructor(private title: Title) {}

 ngOnInit() {
     this.title.setTitle('Title for this component');
 }

}

I have tried with following way with few lines of code, hope it will help you.

You can pass any name in the data object of routes variable (app-routing.module.ts) as follows

const routes: Routes = [
  {
    path: '', 
    component: Component,
    data: {
      page_title: 'Title of your page'
    }

  }
]

Then fetch the value of page_title in the data object of the routes into the app.component.ts and set as title.

import { Router, RoutesRecognized } from '@angular/router';
import { Title } from '@angular/platform-browser';
export class AppComponent {
  page_title = '';
  constructor(private titleService: Title, private route: Router) {
    route.events.subscribe(event => {
      if (event instanceof RoutesRecognized) {
        let current_route = event.state.root.firstChild;
        this.page_title = current_route?.data.page_title;
        if (this.page_title == undefined) {
          alert('Please set page title for the routing')
        }
        else {
          titleService.setTitle(this.page_title);
        }

      }
    });
  }
}

You can also try to declare the service then copy the codes in the constructor to a function inside the service and do the necessary imports, After call the function of service inside constructor of app.component.ts which will help in future projects.

Angular version 14 (2022)

Just add a title key in the routes const. For instance

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// Components
import {ViewHomeComponent} from "./components/home.component";


const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full'},
  { path: 'home', component: ViewHomeComponent, title: 'Home' }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export default class ModuleHomeRouting {}

That will set automatically the title to 'Home'!

Related