Angular ngx-bootstrap 隐藏选项卡内容

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!

Answer 1

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.

Answer 2

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