Mat tabs with progress bar

Question

I am looking for a functionality where

• On moving forward to mat-tabs (switching to another tab) a progress should be tracked with mat ink bar or progress bar.

Here is somewhat similar question which I have found but no proper answer to it is available

Answer 1

You should relationate the progessbar with the "index" of the tab selected.

You can use a template reference variable to "get" the tabgroup

<!--see how you make the property "value" of the progress-bar
    is the value of selectedIndex*33-->

<mat-progress-bar mode="determinate" 
      [value]="(tabgroup?.selectedIndex || 0)*33"></mat-progress-bar>

<!--see this "#tabgroup", it's the template reference variable-->
<mat-tab-group #tabgroup>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

The only we need take careful it's related to the error "Object possibily null". It's the reason don't write simply: tabgroup.selectedIndex*33 else some like (tabgroup?.selectedIndex || 0)*33

NOTE: Remember that selectedIndex goes from 0 to number of tabs-1, So it's possible you want to write

[value]="(tabgroup?.selectedIndex ||0)*33+33"

NOTE 2: you can use also a getter

@ViewChild(MatTabGroup) tabgroup:MatTabGroup
get progress()
{
   return this.tabgroup?this.tabgroup.selectedIndex*33:0
}

And write [value]="progress"