CODEWITHSUNDEEP
angularmaterial-uiangular-materialmat-tab
jayaguruSurya
jayaguruSurya

Reputation: 11

Why does the Angular Material Tab "selectedTabChange" event getting called on component load?

I am using a Angular Mat Tabs to implement Tabs view and capturing each tab selected index as well as label values using the event (selectedTabChange) during on click of the tab header. However this event is getting called during angular component load, which leads to some error.

Is this the expected behaviour of MAT Tabs ? If so how can we prevent from not loading on component load.

Example code below:

//example component.html

<div class="tab-group-container">
    <!-- Tabs section -->
    <mat-tab-group (selectedTabChange)="selectedTabChange($event)" preserveContent #tabGroup>
        <mat-tab *ngFor="let tab of tabs; let index = index" label="{{tab}}">
            <ng-template mat-tab-label>
                {{tab}}
            </ng-template>
        </mat-tab>
    </mat-tab-group>
   <ng-template #tabContent></ng-template>
</div>

//example component.ts
export class exampleTabsComponent{

 selectedTabChange(data: any) {
        const tabEvent = data.tab
        this.tabSelectedValue = tabEvent.textLabel;
        this.addDynamicComponent(tabEvent.textLabel);
        this.tabsIndex = data.index;
    }
}

How can we prevent the (selectedTabChange) not to get called on load of angular component?

Upvotes: 1

Views: 141

Answers (0)

Related Questions