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

It is my app.component.ts:

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

@Component({
templateUrl: 'app/app.component.html',
selector: 'my-app'
})
export class AppComponent {

}


And this is my app.component.html:

<p-tabView>
<p-tabPanel header="Home" leftIcon="fa-bar-chart-o">
<home-app></home-app>
</p-tabPanel>
<p-tabPanel header="Hierarquia" leftIcon="fa-sitemap">
<tree-app></tree-app>
</p-tabPanel>
<p-tabPanel header="Configurações" leftIcon="fa-cog">
<config-app></config-app>
</p-tabPanel>
</p-tabView>


My three components (home, tree and config) are been loaded at the same time when the tabView is loaded. However, I would like that a component was loaded just when its tab was selected. How to do that?

P.S.: if it helps, TabView has an onChange event.

Continue reading...