Angular Child Components Not Initializing Properly When Switching Tabs

I'm implementing a tabbed interface where tab names are fetched from an API, and child components are conditionally rendered based on the active tab. However, when switching tabs, the child components/templates fail to initialize properly.

Tab Component (ss-tabs-slider)

This component renders the tabs and handles tab switching.

<div class="ss-tabs-slider">
<div class="ss-tabs-navigation ss-tabs-navigation--left disabled" [tabsSlider]="'left'">
<span class="icon-left-open"></span>
</div>

<div class="ss-tabs-container">
<ng-template *ngFor="let tab of items" [ssHasPermission]="tab.permission" [ssHasPermissionAction]="tab.permissionAction">
<div (click)="changeTab(tab.id, tab.isDisabled)" class="ss-tab" [ngClass]="{'is-active': isTabActive(tab.id), 'is-disabled': tab.isDisabled}">{{tab.name}}</div>
</ng-template>
</div>

<div class="ss-tabs-navigation ss-tabs-navigation--right" [tabsSlider]="'right'">
<span class="icon-right-open"></span>
</div>
</div>

Component Code:


@Component({
selector: 'ss-tabs-slider',
templateUrl: './tabs-slider.component.html',
})
export class TabsSliderComponent implements OnInit {
@Input() items: any[];
@Input() activeTab: number = 1;
@Output() selectedTab = new EventEmitter<number>();

changeTab(tabId: number, disabled: boolean): void {
if (!disabled) {
this.activeTab = tabId;
this.selectedTab.emit(tabId);
}
}

isTabActive(tabId: number): boolean {
return this.activeTab === tabId;
}
}

Rendering the Parent Component:


<ss-tabs-slider [items]="tabList" [activeTab]="activeTab" (selectedTab)="selectedTab($event)"></ss-tabs-slider>
<ng-container *ngFor="let type of tabList">
<div *ngIf="activeTab === type.id && type.permission === 'anomaly_treatment'">
<ss-anomaly-treatments [inspectionId]="inspection.id" [anomalyType]="type.name"></ss-anomaly-treatments>
</div>
</ng-container>

Issue


Inside ss-anomaly-treatments, there is a button that calls a create() method. However, this action fails to open the parent components ss-anomaly-treatments-mgmt and ss-anomaly-treatments-gut-mgmt modals.

Template code ss-anomaly-treatments

<ng-template [ssHasPermission]="'anomaly_treatment'" [ssHasPermissionAction]="'create'">
<button class="ss-btn outline-primary mb-20" (click)="create()">
+ New {{ anomalyType }}
</button>
</ng-template>

<ss-anomaly-treatments-mgmt
[inspectionId]="inspectionId"
[anomalyType]="anomalyType"
[clientId]="clientId"
(onSave)="showCreateFeedback()">
</ss-anomaly-treatments-mgmt>

<ss-anomaly-treatments-gut-mgmt
[clientId]="clientId"
(onSave)="showGutMgmtFeedback()">
</ss-anomaly-treatments-gut-mgmt>

Modal Configuration (Using ngx-smart-modal)

ss-anomaly-treatments-mgmt


<ngx-smart-modal
#anomalyTreatmentsModal
identifier="anomalyTreatmentsModal"
[closable]="false"
[dismissable]="false"
customClass="medium-modal"
(onEscape)="closeModalAndClear()">
</ngx-smart-modal>

ss-anomaly-treatments-gut-mgmt


<ngx-smart-modal
#gutModal
identifier="gutModal"
[closable]="false"
[dismissable]="false"
customClass="medium-modal"
(onEscape)="closeModalAndClear()">
</ngx-smart-modal>

Method Calls in ss-anomaly-treatments


create(): void {
this.treatmentMgmtComponent.create();
}

Expected Behavior


Clicking the button should call create() in ss-anomaly-treatments-mgmt, which opens the modal:

create(): void {
this.isEditing = false;
this.modalService.getModal("anomalyTreatmentsModal").open();
}


However, switching between tabs seems to break the initialization of ss-anomaly-treatments-mgmt, causing the modal not to open.

Troubleshooting Attempts

1. 
   Verified that this.modalService.getModal("anomalyTreatmentsModal") returns a valid modal instance.
   
   
2. 
   Confirmed that ss-anomaly-treatments-mgmt is being rendered when its parent tab is active.
   
   
3. 
   Ensured that changeTab() properly updates activeTab.
   
   
4. 
   Checked that the tab switching logic does not destroy child components unexpectedly.
   

Question:


Why do the ss-anomaly-treatments-mgmt and ss-anomaly-treatments-gut-mgmt modals fail to initialize when switching tabs? How can I ensure that these components remain properly initialized when navigating through the tabs?

Continue reading...