Angularでページのtitleタグを動的に設定する

Angularでは、Route のパラメータで各ページのタイトルを設定できます。

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

const routes: Routes = [
  {
    path: '',
    children: [{
        path: 'home',
        title: 'このアプリについて',
        loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule),
      },
...

もしAPIのレスポンスなど、動的なデータからタイトルタグを設定したい場合は、@angular/platform-browserのTitle  を使いましょう。

import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-item-detail',
  templateUrl: './item-detail.page.html',
  styleUrls: ['./item-detail.page.scss'],
})
export class ItemDetailPage implements OnInit {
  constructor(
    private readonly activatedRoute: ActivatedRoute,
    private readonly title: Title,
    private readonly http: HttpClient,
  ) { }

  public ngOnInit() {
    const id = this.activatedRoute.snapshot.paramMap.get('id');
    this.http.get(`https://example.com/${id}`)
      .subscribe(result => {
        this.title.setTitle(this.souvenir.name);
      })

全ページのtitleタグに同じ文字列を追加したい場合

サイト名をタイトルにつけたい場合などでは、TitleStrategyを使います。

import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { TitleStrategy, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AppTitleStrategy extends TitleStrategy {
  constructor(private titleService: Title) {
    super()
  }

  override updateTitle(snapshot: RouterStateSnapshot) {
    const title = this.buildTitle(snapshot);
    this.titleService.setTitle(title ? `${title} | サイト名` : 'サイト名');
  }
}

これを、app-routing.module.tsのprovidersにセットします。

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { TitleStrategy } from '@angular/router';
import { AppTitleStrategy } from './app-title-strategy'

...

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule],
  providers: [{ provide: TitleStrategy, useClass: AppTitleStrategy }]
})
export class AppRoutingModule { }

参考にした記事・URL

• https://www.c-sharpcorner.com/article/angular-dynamic-page-title-based-on-route/
• https://blog.lacolaco.net/2022/01/angular-router-title-strategy/
• https://angular.io/guide/router#setting-the-page-title