title: How to preserve tab state with angular material?
body: <p>I am using angular 8 and angular material.
  And I have four tabs and in each tab you can do a edit, but if you go back from edit to the tabs, the tab that was lasted selected has to be selected.</p>
  
  <p>I try it like this:</p>
  
  <pre><code>export class UIStateService {
    private state: UIState;
  
    constructor() {}
  
    setState(state: UIState) {
      this.state = state;
    }
  
    getState(): UIState {
      return this.state ? this.state : { tabState: 1};
    }
  }
  
  export interface UIState {
    tabState: number;
  }
  
  
  </code></pre>
  
  <p>and in the component:</p>
  
  <pre><code>ngOnInit(): void {
     const state = this.uiStateService.getState();
     this.setTabState(state.tabState);
  
    }
  
  
    setTabState(tabId: number) {
  
    }
  
    getCurrentTabState(): number {
  
      return 1;
    }
  
  </code></pre>
  
  <p>and the view looks like this:</p>
  
  <pre><code> &lt;mat-tab-group&gt;
        &lt;mat-tab&gt;
          &lt;ng-template mat-tab-label&gt;
            &lt;mat-icon class="interviews"&gt;speaker_notes&lt;/mat-icon&gt;
            &lt;span i18n&gt;Interview reports&lt;/span&gt;{{ dossierItemsCountString(itemTypes.Interview) }}
          &lt;/ng-template&gt;
          &lt;ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Interview }"&gt;&lt;/ng-container&gt;
        &lt;/mat-tab&gt;
        &lt;mat-tab&gt;
          &lt;ng-template mat-tab-label&gt;
            &lt;mat-icon class="notes"&gt;note&lt;/mat-icon&gt;
            &lt;span i18n&gt;Notes&lt;/span&gt;{{ dossierItemsCountString(itemTypes.Note) }}
          &lt;/ng-template&gt;
          &lt;ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Note }"&gt;&lt;/ng-container&gt;
        &lt;/mat-tab&gt;
        &lt;mat-tab&gt;
          &lt;ng-template mat-tab-label&gt;
            &lt;mat-icon class="goals"&gt;grade&lt;/mat-icon&gt;
            &lt;span i18n&gt;Goals&lt;/span&gt;{{ dossierItemsCountString(itemTypes.Goal) }}
          &lt;/ng-template&gt;
          &lt;ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Goal }"&gt;&lt;/ng-container&gt;
        &lt;/mat-tab&gt;
        &lt;mat-tab&gt;
          &lt;ng-template mat-tab-label&gt;
            &lt;mat-icon class="action-steps"&gt;list&lt;/mat-icon&gt;
            &lt;span i18n&gt;Action steps&lt;/span&gt;{{ dossierItemsCountString(itemTypes.ActionStep) }}
          &lt;/ng-template&gt;
          &lt;ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.ActionStep }"&gt;&lt;/ng-container&gt;
        &lt;/mat-tab&gt;
      &lt;/mat-tab-group&gt;
  
  </code></pre>
  
  <p>So what I have to change? Thank you</p>