Dynamic Syncfusion tab items within a Syncfusion dialog. Based on a parameter, I need to...

Angular 19.0.1

When the dialog is opened, there is a parameter the dialog has called currentAllowed which is a boolean.

If it is false, the first tab should be removed, the one with headerText[0]. I can't figure out what event to use or how to do that. onTabSelected works to remove the tab but only AFTER they see the tab and try to use it. Not ideal.

And my other problem is that once I remove the tab, I don't know how to add it back for subsequent dialog opens when currentAllowed is true. Please help.

<ejs-dialog id='dialog' #ejDialog target="#dialog-container" [showCloseIcon]='false'
width='1300px' [buttons]='buttons' allowDragging="true"
[visible]='dialogVisibility' [position]='position1'>
<ng-template #content>
<ejs-tab #tab id="element" headerPlacement="Top" class="e-fill" (selected)="onTabSelected($event)">
<e-tabitems>
<e-tabitem [header]='headerText[0]'>
<ng-template #content>
<p class="blurb">{{ currentBlurb }}</p>
<div class="grid-div">
<app-line-grid [animalType]="currentString"></app-line-grid>
</div>
</ng-template>
</e-tabitem>
<e-tabitem [header]='headerText[1]'>
<ng-template #content>
<p class="blurb">{{ newBlurb }}</p>
<div class="grid-div">
<app-line-grid [animalType]="newString"></app-line-grid>
</div>
</ng-template>
</e-tabitem>
</e-tabitems>
</ejs-tab>
</ng-template>
</ejs-dialog>


I've also tried using css to add hidden or active but that failed because the second tab wasn't always defined yet.

Continue reading...