I need to load the components dynamically into the tabs in angular. I have a parent component which has angular tabs in it. Inside the tab control, I need to load the child components dynamically.
Initially when the Tabs are loaded it should be loaded with a component1, and on some user interactions it should trigger the event which would load additional tabs and other child components to be loaded inside it. I am facing issues in loading the child components dynamically inside the tab and not understanding how to proceed further? I have created a POC for demo in stackblitz <https://stackblitz.com/edit/angular-e7fnhd> My Parent component is as follows: import {Component, ViewChild, AfterViewInit, TemplateRef, ComponentRef, ViewContainerRef} from '@angular/core'; import { ComponentFactoryResolver } from '@angular/core'; import { Component1 } from './Component1'; import { Component2 } from './Component2'; @Component({ selector: 'home', template: `<mat-tab-group class="demo-tab-group"> <mat-tab *ngFor="let tab of homepageTabs; let i = index" label="{{tab.label}}"> <div class="demo-tab-content"> <!--Component1 and Component2 to be loaded here...--> <ng-template dynamic-tabs #container>{{tab.templateRef}}</ng-template> </div> </mat-tab> </mat-tab-group>` }) export class HomeComponent { homepageTabs: any; @ViewChild('container', { read: ViewContainerRef }) dynamicTabPlaceholder; constructor(private cfr: ComponentFactoryResolver) { //Need to instantiate the components Component1 & Component2 dynamically and load here into the homepageTabs List const factory = this.cfr.resolveComponentFactory(Component1); const componentRef = this.dynamicTabPlaceholder.createComponent(factory); //componentRef.instance.openReportListEvent.subscribe((v) => { this.OpenReportListEvent(v) }) this.homepageTabs = [ { label: 'HomeLabel', //templateRef: Component1,//How to assign the component1 instance here? tabTitle: 'HomeTitle' }, { label: 'App Details', //templateRef: Component2, tabTitle: 'App Details' } ]; } } My child component looks like below, import {Component} from '@angular/core'; @Component({ selector: 'Component1', template: `Component1 Loaded <md-list> <md-list-item class="md-2-line" ng-repeat="item in workbookSheetsList"> <md-checkbox ng-model="item.done"></md-checkbox> <div class="md-list-item-text"> <h3>{{item.name}}</h3> </div> </md-list-item> </md-list> `, //styleUrls: ['./tabs-template-label-example.css'] }) export class Component1 { workbookSheetsList = [{ "name": "TestReport" }, { "name": "SimpleReport" }, { "name": "Highlighting" }, { "name": "CalculatedColumns" }, { "name": "DateFormat" }, { "name": "KPIIndicator" }]; constructor(){ } } I am struck here and not sure how to load the child components to be loaded inside a tab :- 1. what would be the container object which can hold the dynamic components placed inside <mat-tab-group class="demo-tab-group"> <mat-tab *ngFor="let tab of homepageTabs; let i = index" label="{{tab.label}}"> <div class="demo-tab-content"> <!--Component1 and Component2 to be loaded here... what is the correct container object which can hold dynamic components ? --> <!--<ng-template dynamic-tabs #container>{{tab.templateRef}}</ng-template> --> </div> </mat-tab> </mat-tab-group> Run code snippet Expand snippet 1. how to reference this container object and assign the dynamic components into it { label: 'HomeLabel', //templateRef: Component1,//How to assign the component1 instance here? tabTitle: 'HomeTitle' }, Run code snippet Expand snippet Can anybody help me with this issue and let me know how to proceed further? https://stackblitz.com/edit/angular-e7fnhd -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
