Unable to create the multiple params in angular routing

Question

I was able to pass & create single parameter in the URL. When I tried to pass the second params from one component to another component. I'm facing an error saying "Cannot match any routes". I tried to pass by using [queryParams] directive.

In app.routing.module.ts :

const routes: Routes = [
  {path:'' , component:MovieticketinfoComponent},
  {path:'ticketinfo', component:MovieticketinfoComponent},
  {path:'ticketpayment/:id1,:id2',component:TicketpaymentComponent}
];

My Component :

<label for="txtmoviename">Movie Name : </label>
<input type="text" [(ngModel)]="movie_name" id="txtmoviename"> <br/><br/>

<label for="txttktcount">No.of Tickets : </label>
<input type="text" [(ngModel)]="ticket_count" name="ticketcount" id="txttktcount">

<br/>
<button id="btnsubmit" [routerLink]="['/ticketpayment']" [queryParams]="{id1:'movie_name',id2:'ticket_count' }">Submit</button>

Answer 1

There is not need to have comma in route for the second param. Just replace with /:

{path:'ticketpayment/:id1/:id2',component:TicketpaymentComponent} 

And routerLink should look like this:

[routerLink]="['ticketpayment', 'movie_name','ticket_count']