@lucca-front/ng

LuTitleStrategy

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 – Lucca YourAppName.

ex: Sub route title – Parent title – Lucca YourAppName

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), // optional
}),

Naming Strategy

Two naming strategies are available:

• The app is a product (default: 'product'), the title must end with – Lucca YourAppName
• The app is something else ('other'), the title must end with – YourAppName – Lucca

In this case, you must provide the optional parameter namingStrategy: 'other' like so:

provideLuTitleStrategy({
  appName: () => 'YourAppName',
  translateService: () => inject(YourAppNameTranslateService), // optional
  namingStrategy: 'other',
}),

Handling translations

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 CoreHRTranslateService 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 CoreHRTranslateService 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 {}

Example with lucca-cdk

lucca-cdk provides a getStoreModuleName(moduleId) function that will fetch the name of your module from the Lucca Store API.

Use it like this in your app.config.ts / main.ts file:

import { provideLuTitleStrategy } from '@lucca-front/ng/title';
import { getStoreModuleName } from '@lucca/cdk/remote-entity';

provideLuTitleStrategy({
  appTitle: () => getStoreModuleName('my-module-id'),
}),