Primeng: ngFor/ngIf not working for generate a list of tabPanel

[ghost]

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

My problem is simple. I have the following code, to generate a liste of tabPanel with a list of objets.

@Input()
perimeters: BeneficiaryPerimeter[];

<div class="panel-body" *ngIf="perimeters?.length > 0">
<p-tabView orientation="left">
   <p-tabPanel [header]="perimeter.name" *ngFor="let perimeter of perimeters">
           {{perimeter}}
   </p-tabPanel>
</p-tabView>
</div>

It generates the following error:
EXCEPTION: Error in ./TabPanel class TabPanel - inline template:1:56 caused by: Expression has changed after it was checked. Previous value: 'none'. Current value: 'block'.

This code is working:

<p-tabView orientation="left">
    <p-tabPanel [header]="perimeters[0].name">
             {{perimeters[0]}}
      </p-tabPanel>
</p-tabView>

This code is not working:

<p-tabView orientation="left">
     <p-tabPanel [header]="perimeters[0].name" *ngIf="perimeters[0]">
             {{perimeters[0]}}
       </p-tabPanel>
</p-tabView>

Please tell us about your environment:

• Angular version: 2.4.6
  

• PrimeNG version: 2.0.0-rc3
  

• Browser: [Chrome 56]

[upmauro]

I tried simulate but here worked. Can you make a plunkr?

Just to know:

The error look about our NgIf expression - the first time it runs, [style.display] is 'none', then ngAfterContentInit() runs and changes the value to something other than 'block'.

But I can not simulate the problem.

[ghost]

I have found the "problem"

https://plnkr.co/edit/DEJXu5rQhtfgvvzoJcM1

I have two level of tabView:

<p-tabView> <p-tabPanel header="Tab1"> <p-tabView orientation="left"> <p-tabPanel header="{{data.var1}}" *ngFor="let data of datas"> Content 1 </p-tabPanel> </p-tabView> </p-tabPanel> </p-tabView>

With only one level, it's working (like you had tested), but in my case, with a second 'level', I can reproduce the problem.

Note: If i had [selection]=true to the second tabPanel, it's working (strangely).

[m-tomczyk]

I can confirm that this bug exists but for me it looks like *ngFor is the cause. For example:

<p-tabView>
<p-tabPanel *ngFor="let tab of tabs" header="someheader"></p-tabPanel>
</p-tabView>

is invalid while adding at least one static tab:

<p-tabView>
<p-tabPanel header="dummy"></p-tabPanel>
<p-tabPanel *ngFor="let tab of tabs" header="someheader"></p-tabPanel>
</p-tabView>

makes it work as expected.

[Arsenal83]

see this post on forum:
https://forum.primefaces.org/viewtopic.php?p=153436#p153436
its working!

[cagataycivici]

This should be fixed in recent PrimeNG release, please try with it and if the issue persists drop a comment with along with a test case based on plunkr below and we'll review again.

http://plnkr.co/edit/Wj39h1?p=preview

[scottieslg]

This is still a problem with *ngIf

Here's a plunkr that reproduces the problem:

http://plnkr.co/edit/BLg0fYTAe62CyKtUlaFS?p=preview

[ningacoding]

Yes, still a problem latest version 4.1.3

[ningacoding]

the @m-tomczyk 's solution works, but only if you add the tab at the first place, in my case i need the static tab at the last one, and error persists

[ningacoding]

the @Arsenal83 quoted solution, works!!

[slugworth]

@ikuriel that solution only works if you always intend to load the component with the first tab selected. This is still broken.

[ghost]

i found the solution to sovle this error. you can add code like below.

[lxyangfan]

@jaxiell saved my day!! Works for me!

[luigiw]

@jaxiell this solution fixes the error but also breaks lazy loading, now all tabs will be loaded even though I have wrapping up the content, I think this is still a bug.