Passing Angular Query Parameters Programmatically

Image by Rahul Yadav from Pixabay

Scenario

When the user clicks a button navigating to the /cars route, we wish to also set the query parameters /cars?type=suv&color=silver .

Approach

this.router.navigate(
    ['/cars'], 
    { queryParams: { type: 'suv', color='silver' } });
}

Note that the same thing can be done with routerLink declaratively like this:

<a [routerLink]="['/cars']" 
   [queryParams]="{ type: 'suv', color='silver'}">
  Cars
</a>