Gestion des titres de pages dans Angular

Le titre d'une page web est un élément crucial pour l'expérience utilisateur et le SEO. Dans ce tutoriel, nous allons voir comment gérer efficacement les titres de pages dans une application Angular.

Comprendre le concept

La façon la plus simple de définir un titre est de l'ajouter directement dans la configuration des routes :

app.routes.ts

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

export const routes: Routes = [
  {
    path: 'users',
    title: 'Liste des utilisateurs',
    component: UserComponent
  },
  {
    path: 'home',
    title: 'Accueil',
    component: HomeComponent
  }
];

CONSEIL

Choisissez des titres descriptifs et uniques pour chaque page afin d'améliorer l'expérience utilisateur et le référencement.

Titres dynamiques

Parfois, vous aurez besoin de titres dynamiques, par exemple pour afficher le nom d'un utilisateur dans le titre :

app.routes.ts

import { ResolveFn } from '@angular/router';
import { Observable, map } from 'rxjs';
import { UserService } from './core/services/user.service';

const resolveUserTitle: ResolveFn<string> = (route): Observable<string> => {
  const userService = inject(UserService);
  return userService.getUser(route.params['id']).pipe(
    map(user => `Profil de ${user.name}`)
  );
};

export const routes: Routes = [
  {
    path: 'user/:id',
    title: resolveUserTitle,
    component: UserComponent
  }
];

user.service.ts

import { HttpClient } from "@angular/common/http";
import { Injectable, inject } from "@angular/core";
import { Observable } from "rxjs";
import { User } from "./user";

@Injectable({
  providedIn: "root",
})
export class UserService {
  private http = inject(HttpClient);
  readonly url: string = "https://jsonplaceholder.typicode.com/users";

  getUser(id: number): Observable<User> {
    return this.http.get<User>(`${this.url}/${id}`);
  }
}

user.ts

export interface User {
    id: number;
    name: string;
    username?: string;
    email: string;
    address?: {
        street: string;
        suite: string;
        city: string;
        zipcode: string;
        geo: {
            lat: string;
            lng: string;
        }
    };
    phone?: string;
    website?: string;
    company?: {
        name: string;
        catchPhrase: string;
        bs: string;
    };
}

En savoir plus : Créer un resolver

Changer le titre de la page avec le service Title

Le service Title d'Angular permet de manipuler directement le titre de la page de manière programmatique. (la balise <title> du document HTML)

Ce service fournit deux méthodes principales :

• getTitle() : pour obtenir le titre actuel de la page
• setTitle() : pour définir un nouveau titre

Voici comment l'utiliser :

user.component.ts

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

@Component({
  standalone: true,
  selector: 'app-user',
  template: `
    <h1>Détails de l'utilisateur</h1>
    <button (click)="updateTitleWithUsername('John Doe')">Changer le titre</button>
  `
})
export class UserComponent {
  private title = inject(Title);

  ngOnInit() {
    // Récupérer le titre actuel
    const currentTitle = this.title.getTitle();
    console.log('Titre actuel:', currentTitle);

    // Définir un nouveau titre
    this.title.setTitle('Profil utilisateur | Mon App');
  }

  updateTitleWithUsername(username: string) {
    this.title.setTitle(`Profil de ${username} | Mon App`);
  }
}

Stratégie de titre personnalisée

Pour avoir un format cohérent sur toutes vos pages, vous pouvez créer une stratégie de titre personnalisée :

title.strategy.ts

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

@Injectable({providedIn: 'root'})
export class CustomTitleStrategy extends TitleStrategy {
  private title = inject(Title);

  override updateTitle(routerState: RouterStateSnapshot) {
    const title = this.buildTitle(routerState);
    if (title !== undefined) {
      this.title.setTitle(`Mon App | ${title}`);
    }
  }
}

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { TitleStrategy } from '@angular/router';
import { CustomTitleStrategy } from './title.strategy';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    { provide: TitleStrategy, useClass: CustomTitleStrategy }
  ]
};

TitleStrategy est une classe abstraite qui définit le contrat que toute stratégie de titre doit suivre. En étendant cette classe, nous devons implémenter ses méthodes abstraites. Donc la signature de la méthode updateTitle doit correspondre exactement à celle de la classe parente. Cette méthode est appelée à chaque changement de route et permet de définir le titre de la page en fonction de la route active.

buildTitle est une méthode qui doit être appelée dans la stratégie de titre personnalisée. Elle permet de construire le titre de la page en fonction de la route active.

override

Le mot-clé override est obligatoire en TypeScript strict mode (qui est activé par défaut dans Angular). Il indique explicitement que nous redéfinissons une méthode de la classe parente. La signature de la méthode doit correspondre exactement à celle de la classe parente.

Ensuite, dans app.config.ts, nous ajoutons notre stratégie de titre personnalisée dans les providers de l'application pour qu'elle soit prise en compte.

En savoir plus sur useClass

Routes imbriquées

Pour les routes imbriquées, les titres fonctionnent de manière hiérarchique :

app.routes.ts

export const routes: Routes = [
  {
    path: 'users',
    title: 'Gestion utilisateurs',
    component: UserComponent,
    children: [
      {
        path: ':id',
        title: resolveUserTitle,
        component: UserDetailComponent
      }
    ]
  }
];

Cette approche structurée de la gestion des titres vous permettra d'avoir une application plus professionnelle et mieux référencée.