Reimplement TabView Lazy Loading

[bnymncoskuner]

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

Plunkr Case (Bug Reports)
http://plnkr.co/edit/C5Al07WC58f0MNNemUBL?p=preview

Current behavior

When lazy prop of TabView is set, all the inactive tabs are initialized regardless (with service call and everything).

Expected behavior

When lazy prop is set to true, it should wait until the user clicks on tab to initialize the related template/component.

Minimal reproduction of the problem with instructions

You can reproduce this bug on following plnkr. Open the console and you'll see following lines

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

first component constructor
second component constructor
first component ngOnInit
second component ngOnInit

Since, I set [lazy]=true, it should not initialize second component and log out its messages.

On the other hand, if you change the line
<second></second>
to
<second *ngIf="selectedIndex == 1"></second>
in app.template.html, it works as expected.
However, I should not use ngIf if there is a lazy prop of the component.

• Angular version: 4.0.0

• PrimeNG version: 4.1.0-rc.2

[scottieslg]

I'm experiencing the same problem.

[kjocevicius]

Same problem. Also, according to documentation [lazy] should be on tabPanel, however the property isn't available on this component.

[rhornrrs]

I'm having the same problem

Angular 4.1.1
PrimeNg 4.1.1

[rogerleuthner]

Problem persists:
PrimeNg 4.1.2
Angular 4.2.0

Expectation on this guides a design decision; projected action would be helpful; thanks a bunch.

[cagataycivici]

As lazy does not work as advertised, had to rewrite it with a pTemplate.

 <p-tabPanel header="second" cache="true">
          <ng-template pTemplate="content">
              <second></second>
          </ng-template>
      </p-tabPanel>

cache property is optional and decides if it should be loaded again when tab gets re-selected.

[manjeet13]

is this resolved?