How to lazy load Angular 2 components in a TabView (PrimeNG)?

Question

It is my app.component.ts:

import { Component } from \'@angular/core\';

@Component({
    templateUrl: \'app/app.component.html\',
    selector: \'my-app\'
}         


        

Answer 1

Since this question is quite old, I don't know if this will be of any use, but I stumbled upon this problem too, and the answer was right in the PrimeNG documentation:

Lazy loading helps initial load performance by only initializing the active tab, inactive tabs are not initialized until they get selected. A lazy loaded tabpanel contents are cached by default so that upon reselection, they are not created again. You may use cache property on TabPanel to configure this behavior. A TabPanel is specified as lazy when there is a ngTemplate with pTemplate="content" in it.

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

Even though this is only in the V7 documentation, this behavior works just as well in the V5.2 that I'm working with.

I could verify it by checking the "network" tab in the Chrome DevTools, each tabPanel loads separately as expected. However, the cache property doesn't seem to exist, so it will always be cached.

So for the author, he could do: