Angular ngx-bootstrap hide tab content

Question

I have 3 tabs on an Angular 8 page and I'm trying to get one of the tabs to either no longer display or at least to stop displaying its content when a variable equals zero. I've tried a few things so far.

Here is the tab:

<tab heading="{{counter}}" id="counter" [hidden]="counter == 0"></tab>

I tried this with and without the following line in the styles.css and in the component css, as a page I found on the web suggested:

[hidden] { display: none !important; }

Here is the variable in the component ts file:

counter: number;

The variable gets set by an array coming in from an API call, this all appears to be working fine:

this.counter = this.messagesArray.length;

The interpolation on the tab tag works and shows "0" and when logging to the console the count also shows "0" but the conditions in the tab do not hide or change the content.

I also tried ngClass:

<tab heading="{{counter}}" id="counter" [ngClass]="{'counterHide' : counter == 0}"></tab>

None of these change the tab or its content.

Do other approaches exist? Has anyone had any success with dynamically altering ngx-bootstrap tabs? Should I try a different tabset?

Thank you!

@Myerffoeg Thank you! That works, but it also changes the order of the tabs - the tab is supposed to be the 2nd tab, but when the ngIf condition is true, the tab appears last - is there a way to enforce tab order? — ewomack
– ewomack, Commented Jul 6, 2020 at 15:52
I found this suggestion elsewhere and it seems to work: <tab heading="{{counter}}" id="counter" customClass=countHidden{{ count !=0 ? '_HIDDEN' : '' }}></tab> along with a CSS class of .countHidden_HIDDEN { display: none !important; } — ewomack
– ewomack, Commented Jul 6, 2020 at 16:12
You can try using an ::ng-deep with your custom class on your component scss. Moreover, you could do [customClass]="count == 0 ? '' : 'hidden'". — Geoffrey Migliacci
– Geoffrey Migliacci, Commented Jul 7, 2020 at 7:11

ewomack · Accepted Answer · 2020-07-06 16:45:09Z

3

I came across another approach that seems to be working. It makes the tab disappear and does not effect the tab ordering:

<tab heading="{{counter}}" id="counter" customClass=countHidden{{ count !=0 ? '_HIDDEN' : '' }}></tab>

Along with the CSS class:

.countHidden { display: none !important; }

I also needed to put the CSS class in styles.css instead of the individual component's CSS, which I've had to do for most, if not all, of the tab styling.

answered Jul 6, 2020 at 16:45

ewomack

66714 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sivapoornima Karuturi · Accepted Answer · 2022-01-07 23:43:43Z

0

for specific Index

.nav-tabs > li:nth-child(tabIndex){
  display: none;
}

for all tabs in a component

.nav-tabs > li{
display:none
}

Specify them in style.css

answered Jan 7, 2022 at 23:43

Sivapoornima Karuturi

235 bronze badges

Collectives™ on Stack Overflow

Angular ngx-bootstrap hide tab content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related