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)

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.