@lucca-front/ng

Usage

Add title properties in your routes config:

const routes: Routes = [
  {
    path: '',
    data: {
      title: 'Parent title',
    },
    children: [
      {
        path: ':requestId',
        data: {
          title: 'Sub route title',
        },
      },
    ],
  },
];

The service should now be able to collect all title properties defined for the current url. Each time a new title is found for a child, it will be translated and prepended, ending with YourAppName - Lucca.

ex: Sub route title - Parent title - YourAppName - Lucca

For dynamic titles, the prependTitle method from LuTitleStrategy enables you to add a custom title. In a component, you could do the following:

const userName: string = this.userService.getCurrentUser();
this.luTitleStrategy.prependTitle(userName);

You can also replace the first fragment using:

const userName: string = this.userService.getOtherUser();
this.luTitleStrategy.overrideFirstTitlePart(userName);

Both prependTitle and overrideFirstTitlePart can also be called using Observable<string> :

const selectedUser$ = this.userStore.selected$;
this.luTitleStrategy.prependTitle(selectedUser$);

Quickstart

You will need to:

• Install @lucca-front/ng
• Create a service (YourAppNameTranslateService) that implements the ILuTitleTranslateService
• Call provideLuTitleStrategy in your app.module.ts / app.config.ts

provideLuTitleStrategy({
  appName: () => 'YourAppName',
  translateService: () => inject(YourAppNameTranslateService),
}),

Let's start by creating the service

YourAppNameTranslateService be used in combination with the token LU_TITLE_TRANSLATE_SERVICE.

This service should implement the ILuTitleTranslateService interface. It allows you to use any translation service (ngx-translate, transloco, ...etc).

You should end up with the following if you are using ngx-translate:

@Injectable({ providedIn: 'root' })
export class CoreRhTranslateService implements ILuTitleTranslateService {
  constructor(private translateService: TranslateService) {}
  translate(key: string, args: unknown): string {
    return this.translateService.instant(key, args);
  }
}

or if you are using transloco:

@Injectable({ providedIn: 'root' })
export class CoreRhTranslateService implements ILuTitleTranslateService {
  constructor(private translateService: TranslocoService) {}
  translate(key: string, args: HashMap): string {
    return this.translateService.translate(key, args);
  }
}

Adapt app.module.ts config

In the app.module.ts, you need to call provideLuTitleStrategy in the providers array:

@NgModule({
  providers: [
    provideLuTitleStrategy({ translateService: () => inject(YourAppNameTranslateService) }),
  ]
})
export class AppModule {}