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.

https://myapp.com/person/132456/0
This would be the first tab (tabindex 0)
https://myapp.com/person/132456/3
This would be the fourth tab (tabindex 3)

In order to update the route without a reload of the entire component (page) I had to resort to plain ol’ JavaScripts replaceState function.

This way, the current route is substituted for a new one.

function onTabChange(tabIndex){
    const personId = <get person id>;
    window.history.replaceState({}, '',`/person/${personId}/${tabIndex}`);
}

If you want to keep the history, you can use pushState.

Simple solutions are the best.