I have created dynamic ponent instances by selecting pre-existing ponents. For example,

@Component({

    selector: 'dynamic-ponent',
    template: `<div #container><ng-content></ng-content></div>`

})
export class DynamicComponent {
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef; 

    public addComponent(ngItem: Type<WidgetComponent>,selectedPlugin:Plugin): WidgetComponent {
    let factory = thispFactoryResolver.resolveComponentFactory(ngItem);
    const ref = this.container.createComponent(factory);
    const newItem: WidgetComponent = ref.instance;
    newItem.pluginId =  Math.random() + ''; 
    newItem.plugin =   selectedPlugin;
    this._elements.push(newItem);                 
    return newItem;
  }
}

My pre-existed ponents are ChartWidget and PatientWidget which extended the class WidgetComponent that I wanted to add in the container. For example,

@Component({
selector: 'chart-widget',
templateUrl: 'chart-widgetponent.html',
providers: [{provide: WidgetComponent, useExisting: forwardRef(() => ChartWidget) }]
})

export class ChartWidget extends WidgetComponent implements OnInit {
       constructor(ngEl: ElementRef, renderer: Renderer) {
    super(ngEl, renderer);
    }
    ngOnInit() {}
     close(){
      console.log('close');
    }
    refresh(){
      console.log('refresh');
    }
    ...
}

chart-widgetpoment.html (using primeng Panel)

<p-panel [style]="{'margin-bottom':'20px'}">
    <p-header>
        <div class="ui-helper-clearfix">
           <span class="ui-panel-title" style="font-size:14px;display:inline-block;margin-top:2px">Chart Widget</span>
            <div class="ui-toolbar-group-right">                
               <button pButton type="button" icon="fa-window-minimize" (click)="minimize()"</button>
              <button pButton type="button" icon="fa-refresh" (click)="refresh()"></button>
              <button pButton type="button"  icon="fa-expand" (click)="expand()" ></button>
             <button pButton type="button" (click)="close()" icon="fa-window-close"></button>
                    </div>
                </div>
    </p-header>
      some data
</p-panel>

data-widgetpoment.html (same as chart-widget using primeng Panel)

@Component({
selector: 'data-widget',
templateUrl: 'data-widgetponent.html',
providers: [{provide: WidgetComponent, useExisting: forwardRef(() =>DataWidget) }]
})

export class DataWidget extends WidgetComponent implements OnInit {
       constructor(ngEl: ElementRef, renderer: Renderer) {
    super(ngEl, renderer);
    }
    ngOnInit() {}
    close(){
      console.log('close');
    }
    refresh(){
      console.log('refresh');
    }
    ...
}

WidgetComponent.ts

@Component({
  selector: 'widget',
  template: '<ng-content></ng-content>'
})
export  class WidgetComponent{
}

Now I added the ponents by selecting a ponent from the existed ponents (e.g. chart-widget and data-widget) in the following way and stored the instances into an array.

@Component({
templateUrl: 'mainponent.html',
entryComponents: [ChartWidget,  DataWidget], 
})
export class MainComponent implements OnInit {
private elements: Array<WidgetComponent>=[];
 private WidgetClasses = {
    'ChartWidget': ChartWidget,
    'DataWidget': DataWidget        
}
@ViewChild(DynamicComponent) dynamicComponent: DynamicComponent;  

 addComponent(): void{                         
   let ref= this.dynamicComponent.addComponent(this.WidgetClasses[this.selectedComponent], this.selectedComponent);    
   this.elements.push(ref); 

   this.dynamicComponent.resetContainer();                     
}
}

Now, I am facing problem to render the ponents using innerHtml in mainponent.html. It render the html but I am not able to use button click event or other event on it. I have also tried to render chart using primeng but its also not working.

mainponent.html

 <dynamic-ponent [hidden]="true" ></dynamic-ponent>                           
 <widget *ngFor="let item of elements">
     <div [innerHTML]="item._ngEl.nativeElement.innerHTML | sanitizeHtml">
     </div>
 </widget>

I have also implemented a sanitizeHtml Pipe but its giving still same result. So, as I understand innerHTML is only showing the html data but I can't use any button event as well as the js chart. I have also tried to show the items like this {{item}} under tag. But it display like a text [object object]. So, could anyone give a solution for it? How can I render the ponents allowing the button events and js chart? Thanks.

EDIT: See my Plunker here You can see here, it is possible to add chart or data widget dynamically and I am showing it using innerHTML. So, the button events are not working here. If I coding like {{item}} then it shows [object object] text. You can also see in console the ponent array data. The main Question is, How can I active the button events on it (e.g. if i click close or refresh button then it will call the related functions)?

I have created dynamic ponent instances by selecting pre-existing ponents. For example,

@Component({

    selector: 'dynamic-ponent',
    template: `<div #container><ng-content></ng-content></div>`

})
export class DynamicComponent {
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef; 

    public addComponent(ngItem: Type<WidgetComponent>,selectedPlugin:Plugin): WidgetComponent {
    let factory = this.pFactoryResolver.resolveComponentFactory(ngItem);
    const ref = this.container.createComponent(factory);
    const newItem: WidgetComponent = ref.instance;
    newItem.pluginId =  Math.random() + ''; 
    newItem.plugin =   selectedPlugin;
    this._elements.push(newItem);                 
    return newItem;
  }
}

My pre-existed ponents are ChartWidget and PatientWidget which extended the class WidgetComponent that I wanted to add in the container. For example,

@Component({
selector: 'chart-widget',
templateUrl: 'chart-widget.ponent.html',
providers: [{provide: WidgetComponent, useExisting: forwardRef(() => ChartWidget) }]
})

export class ChartWidget extends WidgetComponent implements OnInit {
       constructor(ngEl: ElementRef, renderer: Renderer) {
    super(ngEl, renderer);
    }
    ngOnInit() {}
     close(){
      console.log('close');
    }
    refresh(){
      console.log('refresh');
    }
    ...
}

chart-widget.poment.html (using primeng Panel)

<p-panel [style]="{'margin-bottom':'20px'}">
    <p-header>
        <div class="ui-helper-clearfix">
           <span class="ui-panel-title" style="font-size:14px;display:inline-block;margin-top:2px">Chart Widget</span>
            <div class="ui-toolbar-group-right">                
               <button pButton type="button" icon="fa-window-minimize" (click)="minimize()"</button>
              <button pButton type="button" icon="fa-refresh" (click)="refresh()"></button>
              <button pButton type="button"  icon="fa-expand" (click)="expand()" ></button>
             <button pButton type="button" (click)="close()" icon="fa-window-close"></button>
                    </div>
                </div>
    </p-header>
      some data
</p-panel>

data-widget.poment.html (same as chart-widget using primeng Panel)

@Component({
selector: 'data-widget',
templateUrl: 'data-widget.ponent.html',
providers: [{provide: WidgetComponent, useExisting: forwardRef(() =>DataWidget) }]
})

export class DataWidget extends WidgetComponent implements OnInit {
       constructor(ngEl: ElementRef, renderer: Renderer) {
    super(ngEl, renderer);
    }
    ngOnInit() {}
    close(){
      console.log('close');
    }
    refresh(){
      console.log('refresh');
    }
    ...
}

WidgetComponent.ts

@Component({
  selector: 'widget',
  template: '<ng-content></ng-content>'
})
export  class WidgetComponent{
}

Now I added the ponents by selecting a ponent from the existed ponents (e.g. chart-widget and data-widget) in the following way and stored the instances into an array.

@Component({
templateUrl: 'main.ponent.html',
entryComponents: [ChartWidget,  DataWidget], 
})
export class MainComponent implements OnInit {
private elements: Array<WidgetComponent>=[];
 private WidgetClasses = {
    'ChartWidget': ChartWidget,
    'DataWidget': DataWidget        
}
@ViewChild(DynamicComponent) dynamicComponent: DynamicComponent;  

 addComponent(): void{                         
   let ref= this.dynamicComponent.addComponent(this.WidgetClasses[this.selectedComponent], this.selectedComponent);    
   this.elements.push(ref); 

   this.dynamicComponent.resetContainer();                     
}
}

Now, I am facing problem to render the ponents using innerHtml in main.ponent.html. It render the html but I am not able to use button click event or other event on it. I have also tried to render chart using primeng but its also not working.

main.ponent.html

 <dynamic-ponent [hidden]="true" ></dynamic-ponent>                           
 <widget *ngFor="let item of elements">
     <div [innerHTML]="item._ngEl.nativeElement.innerHTML | sanitizeHtml">
     </div>
 </widget>

I have also implemented a sanitizeHtml Pipe but its giving still same result. So, as I understand innerHTML is only showing the html data but I can't use any button event as well as the js chart. I have also tried to show the items like this {{item}} under tag. But it display like a text [object object]. So, could anyone give a solution for it? How can I render the ponents allowing the button events and js chart? Thanks.

EDIT: See my Plunker here https://plnkr.co/edit/lugU2pPsSBd3XhPHiUP1?p=preview You can see here, it is possible to add chart or data widget dynamically and I am showing it using innerHTML. So, the button events are not working here. If I coding like {{item}} then it shows [object object] text. You can also see in console the ponent array data. The main Question is, How can I active the button events on it (e.g. if i click close or refresh button then it will call the related functions)?

• javascript
• angular
• charts
• angular2-template

• Plunker would be helpful – yurzui Commented Apr 19, 2017 at 15:10
• Html created via innerHTML doesn't support angular bindings – yurzui Commented Apr 19, 2017 at 15:13
• @yurzui yes. thats why I used sanitizeHtml pipe but getting same result. I tried also {{item}} in <div> tag. But its showing [object object] like text. – Khaled Commented Apr 19, 2017 at 15:23
• Hi @yurzui, I give my Plunker link. Could you please check it and give me a solution for it. Thanks. plnkr.co/edit/lugU2pPsSBd3XhPHiUP1?p=preview – Khaled Commented Apr 20, 2017 at 9:54

1 Answer 1

I would create structural directive like:

view.directive.ts

import { ViewRef, Directive, Input, ViewContainerRef } from '@angular/core';

@Directive({
    selector: '[view]'
})
export class ViewDirective {
  constructor(private vcRef: ViewContainerRef) {}

  @Input()
  set view(view: ViewRef) {
    this.vcRef.clear();
    this.vcRef.insert(view);
  }

  ngOnDestroy() {
    this.vcRef.clear()
  }
}

then

app.ponent.ts

private elements: Array<{ view: ViewRef, ponent: WidgetComponent}> = [];

...
addComponent(widget: string ): void{
  let ponent = this.dynamicComponent.addComponent(this.WidgetClasses[widget]);
  let view: ViewRef = this.dynamicComponent.container.detach(0);
  this.elements.push({view,ponent});

  this.dynamicComponent.resetContainer();
}

and

app.ponent.html

<widget *ngFor="let item of elements">
  <ng-container *view="item.view"></ng-container>
</widget>

So i have just moved view from dynamic ponent container to desired place.

Plunker Example