Router Parameter send value without showing in url

[Rakesh Roy]

I am having one situation where i want to show the slug of a category in url like ( http://www.example.com/cat/abc ) but as per the the api it only returns response from id (like http://www.example.com/cat/2 ).

After getting the id from route param and send a get request to api and show the result as per as the response.

Code: 

  My Router link code :

                     

                       <a
                        class="dropdown-item waves-light"
                        href="#"
                        *ngFor="let c of cats"
                        [routerLink]="['/cat' , c.id ]"
                        [innerHtml]="c.name"
                        >
                        </a>

but i want o populate the link like 

     

                       <a
                        class="dropdown-item waves-light"
                        href="#"
                        *ngFor="let c of cats"
                        [routerLink]="['/cat' , c.slug ]"
                        [innerHtml]="c.name"
                        >
                        </a>

Is it possible to do that, showing the slug in url but send the id value.

My category component

 

     ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.id = params['id'];
      this.getPosts();
   });
  }

My Router config 

   const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'blog/:slug', component: PostComponent},
  { path: 'cat/:id' , component: CategoryComponent },
  { path: '', pathMatch: 'full', redirectTo: '/' },
  { path: '**', component: NotfoundComponent}
];

Hope its clear what i want. Can anyone help.

[Tito]

is there a one to one relationship between slug and id?

[Rakesh Roy]

Yes.