Soumya Gangamwar
Soumya Gangamwar

Reputation: 1022

Dynamically load nested components in angular?

I want to organise my all tabs components dynamic components. I am using primg ng for ui tabs. Currently my code is

Before

Here each tab holds each component. when this route is loading all componets are getting initialized, so I want to reduce loading time using dynamic component loading. So Later I tried to organise my components using dynamic component loader provided by anhular.

After allTabs.component.html is look like

Contracts !!

   <div>
       test
       <app-a [arrId]='parrangementId'></app-a> 

b.componet.html

 <div>Allocation</div> 
        <app-b [arrId]='parrangementId'>
      </app-b>

Even I have child component are in , components

ex: AppAComponent.htnml(

Upvotes: 0

Views: 986

Answers (1)

frido
frido

Reputation: 14139

You can lazy load tab content like this:

<p-tabView>
    <p-tabPanel header="Contracts">
        <ng-template pTemplate="content">
            <app-a [arrId]='parrangementId'></app-a>
        </ng-template>
    </p-tabPanel>
    <p-tabPanel header="Allocations">
        <ng-template pTemplate="content">
            <app-b [arrId]='parrangementId'></app-b>
        </ng-template>
    </p-tabPanel>
</p-tabView>

The key is to put the complex content to lazy load inside a <ng-template> with pTemplate="content".

Read the TabView documentation for more information (scroll down to Lazy Loading).

Upvotes: 1

Related Questions