Why angular material tabs recreate component

Issue

I have a material design in my angular application.

        <mat-tab-group [dynamicHeight]="true">
            <mat-tab label="tab1">
                <ng-template matTabContent>
                    <div class="tab-content">
                        <div class="map-container-outer">
                            <div class="map-container">
                               <my-comp1></my-comp1>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </mat-tab>
            <mat-tab label="tab2">
                <ng-template matTabContent>
                    <div class="tab-content">
                           <my-comp2></my-comp2>
                    </div>
                </ng-template>
            </mat-tab>
        </mat-tab-group>

When I selct tab2 and tab1 again, the components (my-comp1, my-comp2) recreating.

Solution

When you use <ng-template matTabContent> you load tabs content in lazy way. Remove them in order to use eager load of all tabs:

<mat-tab-group [dynamicHeight]="true">
    <mat-tab label="tab1">
        <div class="tab-content">
            <div class="map-container-outer">
                <div class="map-container">
                    <my-comp1></my-comp1>
                </div>
            </div>
        </div>
    </mat-tab>
    <mat-tab label="tab2">
      <div class="tab-content">
              <my-comp2></my-comp2>
      </div>
    </mat-tab>
</mat-tab-group>

Answered By – S Overfow

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.