Angular 2 dynamic component not executing

Question

I want to create and execute multiple dynamic component. I want to execute all the component which is present in list. If 3 components are available in list then only one component is executing which is present on last index.

I referred this code.

I'm checking in right.panel.ts file if this component's are present in list or not. If present then I'm calling particular component.

But, here the problem is only FreeMemoryComponent is calling from right.panel.ts, if have other component in list aslo. Here, not calling HeapMemoryComponent, DiskSpaceCOmponent, CpuUsageComponent.

App.module.ts

import.....

@NgModule({
declarations: [
 AppComponent,
 HeapMemoryComponent,
 DiskSpaceComponent,
 CpuUsageComponent,
 FreeMemoryComponent,
 BottomPanelDynamicComponent
],
imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 MaterialModule.forRoot(),
 DndModule.forRoot(),
 routing
],
providers: [.....],
bootstrap: [AppComponent],
entryComponents:[...],
exports: [...]
})
export class AppModule { }

I'm calling to components from following file.

right.panel.ts

import { Component, OnInit } from '@angular/core';
import {HeapMemoryComponent} from '../heap-memory-graph/heap-memory-graph.component';
import {DiskSpaceComponent} from '../disk-space-graph/disk-space-graph.component';
import {CpuUsageComponent} from '../cpu-usage-graph/cpu-usage-graph.component';
import {FreeMemoryComponent} from '../free-memory-graph/free-memory-graph.component';

@Component({
  selector: 'app-rightpanel',
  templateUrl: './rightpanel.component.html',
  styleUrls: ['./rightpanel.component.css']
})
export class RightpanelComponent implements OnInit {
componentData2 = null;
constructor(private savedWidgetService:GetSavedWidgetService) {}

ngOnInit() {
    this.service.getSavedWidget().subscribe(lst => {
      for (var v in lst) {
        if (lst[v].name == "Heap Memory") {
          this.componentData2 = {
            component: HeapMemoryComponent,
            inputs: {
              showNum: 0
            }
          };
        } else if (lst[v].name == "Disk Space") {
          this.componentData2 = {
            component: DiskSpaceComponent,
            inputs: {
              showNum: 0
            }
          };
        } else if (lst[v].name == "CPU Usage") {
          this.componentData2 = {
            component: CpuUsageComponent,
            inputs: {
              showNum: 0
            }
          };
        } else if (lst[v].name == "Free Memory") {
          this.componentData2 = {
            component: FreeMemoryComponent,
            inputs: {
              showNum: 0
            }
          };

        } 
      }
    }
    }
    }

right.panel.html

<app-bottompanel [componentData2]="componentData2" class="row"></app-bottompanel>

And in following file i'm creating and executing component dynamically.

import {Component, Input, ViewContainerRef, ViewChild, ReflectiveInjector, ComponentFactoryResolver} from '@angular/core';
import {HeapMemoryComponent} from '../heap-memory-graph/heap-memory.component';
import {DiskSpaceComponent} from '../disk-space-graph/disk-space.component';
import {CpuUsageComponent} from '../cpu-usage-graph/cpu-usage.component';
import {FreeMemoryComponent} from '../free-memory-graph/free-memory.component';

@Component({
  selector: 'app-bottompanel',
  entryComponents[HeapMemoryComponent,DiskSpaceComponent,CpuUsageComponent,FreeMemoryComponent],
  template: `<div #dynamicComponentContainer></div>`,
})
export default class BottomPanelDynamicComponent {
  currentComponent2 = null;

  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) 
  dynamicComponentContainer: ViewContainerRef;

  // component: Class for the component you want to create
  // inputs: An object with key/value pairs mapped to input name/input value
@Input() set componentData2(data: {component: any, inputs: any }) {
if (!data) {
  return;
}

// Inputs need to be in the following format to be resolved properly
let inputProviders = Object.keys(data.inputs).map((inputName) => {return {provide: inputName, useValue: data.inputs[inputName]};});
let resolvedInputs = ReflectiveInjector.resolve(inputProviders);

// We create an injector out of the data we want to pass down and this components injector
let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicComponentContainer.parentInjector);

// We create a factory out of the component we want to create
let factory = this.resolver.resolveComponentFactory(data.component);

// We create the component using the factory and the injector
let component = factory.create(injector);

// We insert the component into the dom container
this.dynamicComponentContainer.insert(component.hostView);

// We can destroy the old component is we like by calling destroy
if (this.currentComponent2) {
  //this.currentComponent.destroy();
}

this.currentComponent2 = component;
}

constructor(private resolver: ComponentFactoryResolver) {

}
}

What is happening here? Please help me.

Günter Zöchbauer · Accepted Answer · 2017-03-27 13:33:28Z

1

Change

componentData2 = null;

to

componentData2 = [];

and

      this.componentData2 = {
        component: HeapMemoryComponent,
        inputs: {
          showNum: 0
        }
      };

to

      this.componentData2.push({
        component: HeapMemoryComponent,
        inputs: {
          showNum: 0
        }
      });

and

<app-bottompanel [componentData2]="componentData2" class="row"></app-bottompanel>

to

<app-bottompanel *ngFor="let cd2 of componentData2" [componentData2]="cd2" class="row"></app-bottompanel>

answered Mar 27, 2017 at 13:33

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anil Jagtap Over a year ago

Zochbauer, Thank you so much. It is very great solution.

Günter Zöchbauer Over a year ago

You're welcome. Glad to hear you could make it work :)

Anil Jagtap Over a year ago

Zochbauer, this is my question: stackoverflow.com/questions/43364616/… Please give me solution

Collectives™ on Stack Overflow

Angular 2 dynamic component not executing

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related