Angular: Change the route without reloading
First off, the simple solution baffled me and made me slap my forehead because I can’t believe I haven’t thought of it sooner.
Problem : Our Angular 5 application uses Angular Material to create a stylish UI. We have a person information card with several tabs (mat-tab). We wanted the selected tab to be represented in the route, so that the user could share a link of current page (including the selected tab) to a colleague.
So, on tab changed, we needed to update the route.
This would be the first tab (tabindex 0)
This would be the fourth tab (tabindex 3)
This way, the current route is substituted for a new one.
const personId = <get person id>;
If you want to keep the history, you can use pushState.
Simple solutions are the best.