In Angular 10 is it possible to have different data for dynamic routes-CodePudding

Consider the below dynamic route:

export const routes: Routes = [ 
{  
    path: 'template/:templateId',
    component: TemplateComponent,
    data: { pageTitle: 'TEMPLATES'}
}]

Is it possible to have dynamic pageTitle for same route and same component ?

Example:
If URL is 'template/01' then I need to set pageTitle in data as 'TEMPLATES-01'.
If URL is 'template/02' then I need to set pageTitle in data as 'TEMPLATES-02'.

In this scenario the path remains the same 'template/:templateId' component also remains same 'TemplateComponent' but the URL changes to 'template/01' and 'template/02'.

CodePudding user response：

You can do that (as R. Richards indirectly pointed out) using the Title in @angular/platform-browser

You could do the change locally (in each component on initialization - ngOnInit, but that would be repetitive and changing every title - if needed, would become a time consuming job) or you could make a service in which you change the title of the page based on the ActiveRoute

CodePudding user response：

I'd say a Resolver could be a reasonable solution. It could take the param of the ActivatedRouteSnapshot, and return a title that matches the route from its resolve-function.

Usage for the route would be something like this:

export const routes: Routes = [
{
    path: 'template/:templateId',
    component: TemplateComponent,
    resolve: { pageTitle: TemplateResolveService },
}]