showCloseButton apply to all existing tab items and even added ones dynamically.

[Maged Mikaeeel]

Hi,

   How can I set certain tab item(s) to be closeable and others not to be? Currently, the showCloseButton property will apply for all tab items.

Thanks

[Arun Palaniyandi]

Hi Maged Mikaeeel,  

  

Thanks for Contacting Syncfusion support.  

  

We have checked your shared requirement. As per the current Tab implementation, the showCloseButton property will apply close icons for all tab items. Hence in order to resolve this, we have to manually hide the close icon using the cssClass property of the Tab item. Please find the below code snippets for more reference. 

  

  

<ejs-tab id="element" #element [showCloseButton]="true" (selected)="select($event)" (created)=created($event) > 

  <e-tabitems> 

    <e-tabitem [header]='headerText[0]' content="#idv"></e-tabitem> 

    <e-tabitem [header]='headerText[1]' cssClass="withoutIcon" content="#idv" ></e-tabitem> //set the cssClass property for tab item to show without close icon 

  </e-tabitems> 

</ejs-tab> 

 

  

  

Ts: 

  

public created(e){ 

 

this.tabObj.items.push({ header: { text:  'DynamicTabItem' }, cssClass:"withoutIcon", content: "#idv" }); 

//use the same way for dynamically created tab also  

 

(<any>this.tabObj).refresh(); 

} 

  

CSS: 

 

    .e-tab .e-tab-header .e-toolbar-item.withoutIcon span.e-icons.e-close-icon { //using the custom cssClass class for tab item, disable the close icon 

      display: none; 

    } 

  

  

  

  

Demo sample :  https://stackblitz.com/edit/github-lushmu-qqqjxd?file=src%2Fapp%2Fapp.component.ts 

  

Please check our shared sample and if you still have any query means, please let us know so that we would help you out better. 

  

Let us know if you have any further queries.   

  

Regards,  

Arun P.  

[Maged Mikaeeel]

Thank you so much, I'll try it and let you know if I've any other questions.

[Arun Palaniyandi]

Hi Maged Mikaeeel,   

   

Thanks for your update. 

 

We will wait to hear from you. 

 

Regards, 

Arun P. 

[Yvan Blancmunier]

Hello,

I have the same requirement, and for some reason, using the markup [ngClass] in e-tabitem doesnt seem to work. Any idea why and how I could make it work?

Here is an extract of my code:

        <ejs-tab id="tab_default" #tabObj [animation]="animation"

          [showCloseButton]="selectedAnalysisVersion?.analysisVersionId === latestAnalysisVersionId"

          (removing)="onDeleteSection($event)">

          <e-tabitems>

            <ng-container formArrayName="sections">

              <ng-container *ngFor="let sectionControl of sections?.controls; let i = index">

                <e-tabitem *ngIf="sectionControl.value.analysisSectionType === AnalysisSectionType.Default"

                           [ngClass]="{ withoutIcon: sectionControl.value.isMandatory }">

<!-- the value sectionControl.value.isMandatory is correct and contains either True or False but the class is never applied  -->

                  <p>{{ sectionControl.value.sectionName }}</p>

                  <ng-template #headerText>

                    <div>{{ sectionControl.value.sectionName }}-{{ sectionControl.value.isMandatory }}g</div>

                  </ng-template>

                  <ng-template #content>

Thanks & Regards,

Yvan

[Yvan Blancmunier]

got this fixed by using directly the cssClass property as follow:

    cssClass="{{ sectionControl.value.isMandatory ? 'withoutIcon' : '' }}"

thanks!

[Satheesh Kumar Balasubramanian]

Hi Yvan,

We are happy that you have found the solution yourself.

Regards,

Satheesh Kumar B