Cache MatTabGroup selection with Router QueryParams

cached-mat-tab.html

<mat-tab-group [animationDuration]="180"
               [selectedIndex]="tabIndex"
               (selectedIndexChange)="changeTab($event)">
  <mat-tab label="One">
     Tab One
  </mat-tab>
  <mat-tab label="Two">
    Tab Two
  </mat-tab>
  <mat-tab label="Three">
    Tab Three
  </mat-tab>
<mat-tab-group>

cached-mat-tab.ts

import {
    ActivatedRoute,
    Router
} from '@angular/router';

import { Component } from '@angular/core';

@Component({
    selector: 'cached-mat-tab',
    templateUrl: 'cached-mat-tab.html'
})
export class CachedMatTab {
    tabIndex: number = 0;

    constructor(
        private route: ActivatedRoute,
        private router: Router
    ) {
        route.queryParamMap.subscribe(params => {
            if (params.has('tab'))
                this.tabIndex = +params.get('tab');
        });
    }

    changeTab(index: number) {
        this.router.navigate([], {
            relativeTo: this.route,
            queryParams: {
                tab: index > 0 ? index : null
            },
            queryParamsHandling: 'merge'
        })
    }
}