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  src=".." alt="logo" />
        <h1 >My first application - </h1>  // Title 
    </mat-toolbar>

    <mat-sidenav-container>
        <mat-sidenav #sidenav="matSidenav">
            <app-sidebar></app-sidebar>
        </mat-sidenav>
        <mat-sidenav-content>
            <div >
                <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 >

    <h2>Menu</h2>

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

CodePudding user response：

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

CodePudding user response：

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);
  }
}