Using mat-tabs with ngFor, Initializing component twice

[ssahu123]

Example -
https://stackblitz.com/edit/components-issue-otvvf6

html of main component have -
```
<mat-tab-group [(selectedIndex)]="selectedTabIndex" (selectedTabChange)="onTabSelect($event)"> <mat-tab [label]="tab.value.title" *ngFor="let tab of tabs | keyvalue"> <ng-template matTabContent> <div *ngIf="(if user tab index selected show active users)"> <active-users></active-users> </div> </ng-template> </mat-tab> </mat-tab-group>

 

#### Expected Behavior
It should initialize the user component on the selection of user tab only once.

#### Actual Behavior
But when I select user tab it initialize its component twice. 

#### Environment
- Angular: 7
- CDK/Material: 8.0.1
- Browser(s): Chrome v75
- Operating System (e.g. Windows, macOS, Ubuntu): Windows/Ubuntu

[tomicarsk6]

Please create stackblitz for that, it’s hard to help you without an example.

[ssahu123]

Please create stackblitz for that, it’s hard to help you without an example.

https://stackblitz.com/edit/components-issue-otvvf6

[tomicarsk6]

You can see a solution on this stackblitz example.

Basically only difference between this and your example is that I’m using tab index value that is calculated in ngFor, instead of fixed value like you are doing.