how to change page title in angular router

Question

I would like to change the main title of my application every time I change my route like My first application - Dashboard or My first application - Statistic

Here is my code, I use Material UI :

defaut.component.html:

<div>
    <mat-toolbar>
        <button mat-icon-button *ngIf="sidenav.mode === 'over'" (click)="sidenav.toggle()">
            <mat-icon *ngIf="!sidenav.opened">
                menu
            </mat-icon>
            <mat-icon *ngIf="sidenav.opened">
                close
            </mat-icon>
        </button>
        <img class="logo" src=".." alt="logo" />
        <h1 class="title">My first application - </h1>  // Title 
    </mat-toolbar>

    <mat-sidenav-container>
        <mat-sidenav #sidenav="matSidenav">
            <app-sidebar></app-sidebar>
        </mat-sidenav>
        <mat-sidenav-content>
            <div class="main">
                <router-outlet></router-outlet>
            </div>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

defaut.component.ts:

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { BreakpointObserver } from '@angular/cdk/layout';
import { MatSidenav } from '@angular/material/sidenav';

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

export class DefaultComponent implements AfterViewInit {
  @ViewChild(MatSidenav)
  sidenav!: MatSidenav;

  constructor(private observer: BreakpointObserver) { }

  ngAfterViewInit(): void {
    this.observer.observe(['(max-width:959px)']).subscribe((res) => {
      if (res.matches) {
        this.sidenav.mode = 'over';
        this.sidenav.close()
      }
      else {
        this.sidenav.mode = 'side';
        this.sidenav.open()
      }
    })
  }

}

sidebar.component.html:

<div class="navbar">

    <h2>Menu</h2>

        <div class="menu-item">
            <button mat-button class="menu-button" routerLink="/app/dashboard" routerLinkActive="active" style="text-decoration:none">
                <span>Dashboard</span>
            </button>
            <button mat-button class="menu-button" routerLink="/app/statistic" routerLinkActive="active" style="text-decoration:none">
                <span>Statistic</span>
            </button>
        </div>
</div>

While the answer below is certainly well written... what title do you actually want to change? The actual title of the page tab - or <h1 class="title">My first application - </h1>? — user13258211
– user13258211, Commented Jul 18, 2022 at 13:21
I would like to complete the title according to the roads. For example with React, I use const title = location.pathname === '/app/dashboard' ? 'Dashboard' : location.pathname === '/app/statistics' ? 'Statistics' and <h1>My first app - ${title}</h1> — Daemes
– Daemes, Commented Jul 18, 2022 at 14:08

Obum · Accepted Answer · 2022-07-18 13:13:05Z

For Angular version 14 and above

Angular now permits you to set the page title with routing.

So where you configure the RouterModule with the routes array, you can add a title to a given route, or configure a TitleStrategy:

{ path: 'default', component: DefaultComponent, title: 'Default' }

For Angular Versions below 14

Use the Title service.

A common way to do this is to save the current title on component load, set your own title, then in the ngOnDestroy lifecycle callback, you set back the previous title.

So in your component TypeScript file, you could have something like:

import { BreakpointObserver } from '@angular/cdk/layout';
import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-default',
  templateUrl: './default.component.html',
  styleUrls: ['./default.component.css']
})
export class DefaultComponent implements AfterViewInit, OnDestroy {
  @ViewChild(MatSidenav)
  sidenav!: MatSidenav;
  oldTitle: string;

  constructor(private observer: BreakpointObserver, private title: Title) {
    this.oldTitle = this.title.getTitle();
    this.title.setTitle('New Title Here');
  }

  ngAfterViewInit(): void {
    this.observer.observe(['(max-width:959px)']).subscribe((res) => {
      if (res.matches) {
        this.sidenav.mode = 'over';
        this.sidenav.close();
      } else {
        this.sidenav.mode = 'side';
        this.sidenav.open();
      }
    });
  }

  ngOnDestroy(): void {
    this.title.setTitle(this.oldTitle);
  }
}

Drenai · Accepted Answer · 2022-07-18 12:59:33Z

1

There's an Angular service that updates the title - you can use it it the main page components

https://angular.io/api/platform-browser/Title

answered Jul 18, 2022 at 12:59

Drenai

12.6k9 gold badges60 silver badges94 bronze badges

Comments

Mani kandan · Accepted Answer · 2022-07-18 16:03:50Z

0

Import the below in the required component import { Title } from '@angular/platform-browser;
In constructor initialise the title variable constructor(private titleService:Title) { }

Update the title with this 3) ngOnInit() {

this.titleService.setTitle(this.title);

Click here for demo

edited Jul 18, 2022 at 16:03

answered Jul 18, 2022 at 15:59

Mani kandan

175 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

how to change page title in angular router

3 Answers 3

For Angular version 14 and above

For Angular Versions below 14

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

For Angular version 14 and above

For Angular Versions below 14

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related