Dynamically load nested components in angular?

Question

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

• allTabs.component.html

Before

• <p-tabPanel header="Contracts">
               <app-a [arrId]='parrangementId' *ngIf="tabIndex==1"></app-a>
             </p-tabPanel>
             <p-tabPanel header="Allocations">
               <app-b [arrId]='parrangementId' *ngIf="tabIndex==2"></app-b>
             </p-tabPanel>
           </p-tabView>
  

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

•     <p-tabPanel header="Contracts">
        <ng-template ad-cm></ng-template>
  
      </p-tabPanel>
      <p-tabPanel header="Allocations">
  
       </p-tabPanel>
  

  allTabs.component.ts

•  @Component({   
     templateUrl: './rmanArrangementsOverView.component.html',  
      selector: 'rmanArrangementsOverView-data'   entryComponents: 
    [AllocationComponent, ContractsComponent]
          })
  
     export class ALLCom {
  
  @ViewChild(AdCmDirective) adCm: AdCmDirective;   ref:ComponentRef<any>;   private loadedComponentsArray = [
     {
       'componentIndex': 1,
       'componentName':  ContractsComponent
     },
     {
       'componentIndex': 2,
       'componentName':  AllocationComponent
     },
     {
       'componentIndex': 3,
       'componentName':  RmanContTransToReleaseComponent
     },
     {
       'componentIndex': 4,
       'componentName':  RmanOrderBookingsVComponent
     },
     {
       'componentIndex': 5,
       'componentName':  RmanInvoiceHeadersVComponent
     }   ]   constructor(private componentFactoryResolver: ComponentFactoryResolver){
  
  
  
   }
  
   ngOnInit() {
  
      }
  
   loadComponent(component) {
  
     let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
  
     let viewContainerRef = this.adCm.viewContainerRef;
     viewContainerRef.clear();
  
     let componentRef = viewContainerRef.createComponent(componentFactory);
     this.ref=componentRef;   }   removeComponent(){
  
     try{
       this.ref.destroy();
     }
     catch(e){
  
     }   }
  
   handleChange(event: any) {
     console.log(event);
     var index = event.index;
     console.log('event tab index : ' + index);
     this.tabIndex = index;
  
     let component = this.loadedComponentsArray.find(c=> {
       if(c.componentIndex == this.tabIndex) return true
     });
     console.log(component, 'component');
     this.removeComponent();
     this.loadComponent(component.componentName);   }
  

  a.component.html

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(

• <app-a-child [asle]="ddata"></app-a-child>

Answer 1

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).