Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

58
Views
In Angular 10 is it possible to have different data for dynamic routes

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'.

7 months ago · Juan Pablo Isaza
2 answers
Answer question

0

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

7 months ago · Juan Pablo Isaza Report

0

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 },
}]
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.