Why is selecting tab not working in PrimeNG?

Question

I'm trying to select Tab2 by default, But it's not working correctly, It's selecting both tabs. I can see Hello and World on screen.

<p-tabView>
    <p-tabPanel header="Tab1">
        Hello
    </p-tabPanel>
    <p-tabPanel header="Tab2" [selected]="true">
        World
    </p-tabPanel>
</p-tabView>

I'm using primeng version 4.1.2.

Reference: https://www.primefaces.org/primeng/#/tabview

can you check if all other attributes are working or is there any error in console. because i don't think this is an issue. — Hrishikesh Kale, Feb 10 '18 at 06:30
What do you mean by other attributes are working ? There is no error in console. — Vivek Nuna, Feb 10 '18 at 06:31
let's investigate the issue by checking if all other attributes are working for that same element if yes then there should be an issue with that element if no then there is some issue while importing this TabViewModule. — Hrishikesh Kale, Feb 10 '18 at 06:38
I don't have your problem with PrimeNG 4.1.2 : [Plunker](https://plnkr.co/edit/QQPQPJ6GHlRVylHNdtva?p=preview) — Antikhippe, Feb 10 '18 at 19:17
@Antikhippe Yes, it's working fine. Then What could be the possible reason? — Vivek Nuna, Feb 11 '18 at 05:32
even I have tried using this but it works fine and as expected. will you try to install this primeng again or using their latest version? — Hrishikesh Kale, Feb 11 '18 at 05:56

score 1 · Accepted Answer · answered Feb 12 '18 at 15:29

I have solved the issue, posting here so that it can help others.

I was using *ngIf="someCondition" with <p-tabPanel header="Tab1"> tag, I have used [hidden]="!someCondition" eqivalent of ng-hide="someCondition" in AngularJS.

<p-tabView>
    <p-tabPanel header="Tab1">
        Hello
    </p-tabPanel>
    <p-tabPanel header="Tab2" [selected]="true" [hidden]="!someCondition">
        World
    </p-tabPanel>
</p-tabView>

The reason you can find here.

Why is selecting tab not working in PrimeNG?

1 Answers1