【Angular 14】Router のプロパティ title を使ってタイトルを設定する方法

はじめに

今回はAngular 14の新機能のひとつ、Router に追加されたプロパティ title を使って各ページに任意のタイトルを設定する方法を紹介します。

Router のプロパティ title を使ってタイトルを設定する方法

下記のように app-routing.module.ts 内のRoutes設定箇所にtitleプロパティを追加してタイトルの値を設定するだけで完了です。

const routes: Routes = [

  {

    path: '',

    component: ItemListComponent,

    title: 'Item List'

  },

  {

    path: 'item/:id',

    component: ItemDetailComponent,

    title: 'Item Detail'

  },

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

これで各ページのタイトルに title プロパティに設定した値が表示されます。

メチャクチャ簡単でビックリしちゃいますね！

ちなみに title プロパティを設定していないページでは app.component.ts などで設定したタイトルが表示されます。

export class AppComponent {

  title = 'my-app';

}

応援おねがいします

ブログランキングに参加中です。

下記バナー・リンクをクリックして応援おねがいします！

にほんブログ村