Tab is shown inspite of ngIf

Question

The FirstTab still remains inspite of using ngIf. ngIf helps in not rendering the selector first-tab.How to remove the tab also.

here's the code

<tabs style="min-height:auto">
        <tab tabTitle="FirstTab" *ngIf="str=='dp'" >
            <first-tab></first-tab>
        </tab>
        <tab tabTitle="SecondTab" [active]="true">
            <second-tab>
            </second-tab>
        </tab>
</tabs>

dp is one of the options from the dropdown(whose code is not shown)

when dp is chosen

this is rendered on the browser two tabs

when other options is chosen

this is rendered on the browser two tabs with first tab disabled

now cannot i remove the tab altogether when str!=dp ?

Also when i again choose Dp then this is rendered one more first Tab is inserted that is disabled The *ngIf expression works fine ...surely I have used [hidden] and ngshow How to resolve this ?

Answer 1

It seems like you are using angularjs and not Angular 2+. Maybe you should try with ng-if instead of *ngIf

Here is the documentation for your version of angularjs. https://code.angularjs.org/1.2.23/docs/api/ng/directive/ngIf