1

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>
Improve this question
2
  • 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>? 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> Commented Jul 18, 2022 at 14:08

3 Answers 3

Reset to default
6

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); } }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That Route approach is very handy
1

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

Improve this answer

Comments

0
  1. Import the below in the required component import { Title } from '@angular/platform-browser;
  2. 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

Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.