How to use route variable immediately after define in angular 11?

Question

I want to use route variable for breadcrumb title. For example:

{
 path:'sample/:title',
 data:{
 breadcrumb:[
   {title:'sample',link:'sample'},
   {title:using :title variable here}
   ]
 }
}

Is there a way to use variable immediately after define?

Answer 1

you can do the following :

constructor(private router: Router  ) {}

 this.router.navigate(['/page', { data: YourData'}]);

Answer 2

1. If the title is fixed a good place to keep breadcrumb data in route config.

   {
         path:'sample',
         data:{
          breadcrumb:"sample"
         }
    }

2. If the title is variable you can use this.

   constructor(private router: Router  ) {}
   .....
   .....
   goTo() {this.router.navigate(['/page', { data:  YourData'}]);}

But this is not a good approach from my end. I always need to set data where I need a breadcrumb. I think we should make a component where we format the full breadcrumb from the URL and apply it to the view. After that, we use that sharable component to our main components.