AngularでTitleサービスを使って柔軟にページのタイトルを書き換える便利なやり方

AngularでHTMLページのタイトルを任意の場所から書き換えるメソッドとして利用したい場合、そのものズバリでビルドインで提供されている

Titleサービス

を利用できます。
そもそもはAngularに限らず汎用的にJavascriptコードで呼び出す際には、

Document API

から

document.titleプロパティ

よりページタイトルを書き換えることができます。
document APIをAngularでも使えるようにする方法にはいくつかありますが、たとえば変数定義をTypescriptソースコードのグローバルスコープ内におくことで

document

を呼び出すことも出来るでしょう。

開く/閉じる

            declare let document: any;

この用法だとお世辞にもAngularらしい作法とは言えません。とりあえずブラウザでやっつけで動けばいいや的な発想の少々乱暴なテクニックです。
Angular的な作法だとdocument APIによるフルコントロールを得たい場合には、

@angular/common

から

DOCUMENT

変数をDIすることでサービスとして提供することをができます。

開く/閉じる

            import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable()
export class HogeService {
    constructor(
        @Inject(DOCUMENT) private document: Document
    ) {}

    //...
}

今回の狙いとして、ページタイトル書き換えるだけなので、わざわざdocumentインスタンスを引き出して操作させるほどでもないという用途に適しているのが

Title

サービスです。

【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

TitleサービスからHTMLページタイトルの書き換え

Angularビルドインの

Titleサービス

を使うと、

@angular/common:DOCUMENT

をDIするクラスを用意する必要もなく、直接任意のコンポーネントに読み込んで利用することが可能です。

開く/閉じる

            import { Component, ngInit } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
    selector: 'app-hoge-compo',
    template: `
    <div class="hoge">
        HELLO, HOGE!
    </div>
    `,
    styleUrls: ['./hoge.component.scss']
})
export class HogeComponent implements {
    constructor(
        //👇Titleサービスを使う
        private title: Title
    ) {}

    ngOnInit() {
        //👇Titleを変更
        this.title.setTitle('タイトルが自由に変わります');
    }

}

コンポーネントだけでなく、別のサービスから呼び出びだしても同じ要領で簡単に利用できます。

開く/閉じる

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

@Injectable({
    providedIn: 'root'
})
export class HogeService {

    constructor(
        //👇Titleサービスを使う
        private title: Title
    ) { }

    setTitle(title: string) {
        this.title.setTitle(title);
    }

    getTitle(): string {
        return this.title.getTitle();
    }

}

documentに直接アクセスしなくて良くなるので、冒頭で挙げた方法よりもより可読性が上がります。

【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

参考サイト

Set the document title

How to set a document title in Angular app