abp/docs/en/framework/ui/angular/title-strategy.md

//[doc-seo]
{
  "Description": "Configure localized Angular route titles, the application-name suffix, and a custom TitleStrategy in an ABP application."
}

Document Title Strategy

provideAbpCore registers AbpTitleStrategy as Angular's default TitleStrategy. It reads the deepest active route title, localizes it, and updates the browser document title.

Setting a Route Title

Use Angular's title route property. The value can be an ABP localization key:

import { Routes } from '@angular/router';
import { BooksComponent } from './books.component';

export const routes: Routes = [
  {
    path: 'books',
    component: BooksComponent,
    title: 'BookStore::Menu:Books',
  },
];

With an application name of Book Store, the resulting title is:

Books | Book Store

The strategy resolves the application name from the ::AppName localization key. If a route has no title, it uses only the application name. It also recalculates the active title when the language changes.

Removing the Application-Name Suffix

Provide DISABLE_PROJECT_NAME with true to omit the application name from routes that have a title:

import { DISABLE_PROJECT_NAME } from '@abp/ng.core';
import { ApplicationConfig } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide: DISABLE_PROJECT_NAME,
      useValue: true,
    },
  ],
};

The route above then produces Books. A route without a title still falls back to the application name.

Replacing the Strategy

Create an Angular TitleStrategy and pass it to the withTitleStrategy feature when the application needs a different title convention:

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

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

  override updateTitle(routerState: RouterStateSnapshot): void {
    const routeTitle = this.buildTitle(routerState);
    this.title.setTitle(routeTitle ? `My Application - ${routeTitle}` : 'My Application');
  }
}

Register it together with the normal ABP Core options:

import { provideAbpCore, withOptions, withTitleStrategy } from '@abp/ng.core';
import { registerLocaleForEsBuild } from '@abp/ng.core/locale';
import { ApplicationConfig } from '@angular/core';
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAbpCore(
      withOptions({
        environment,
        registerLocaleFn: registerLocaleForEsBuild(),
      }),
      withTitleStrategy(CustomTitleStrategy),
    ),
  ],
};