How to implement angular2 components via their name with ngFor?

Question

I created the components below:

app-widget-resume
app-widget-my-courses-learner
app-widget-my-courses-teacher
app-widget-my-calendar
app-widget-virtual-classes

and I would like to load them into my component my-dashboard thanks to an array of string

sanitize-html.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';

@Pipe({
    name: 'sanitizeHtml'
})

export class SanitizeHtmlPipe implements PipeTransform {

    constructor(private _sanitizer: DomSanitizer) {}

    transform(value: any, args?: any): SafeHtml {
        return this._sanitizer.bypassSecurityTrustHtml(value);
    }
}

dashboard.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';

@Component({
  selector: 'calli-common-dashboard-page',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss'],
  providers: []
})
export class DashboardComponent implements OnInit, AfterViewInit {

    public widgets: Array<string>;

    constructor() {}

    ngAfterViewInit() {
        this.widgets = [
            { tag: 'app-widget-resume', position: 1},
            { tag: 'app-widget-my-courses-learner', position: 2},
            { tag: 'app-widget-my-courses-teacher', position: 3},
            { tag: 'app-widget-my-calendar', position: 4},
            { tag: 'app-widget-virtual-classes', position: 5},
        ].map(o => `<` + o.tag + `></` + o.tag + `>`);
   }
}

dashboard.component.html

<div class="row center-xs center-md center-lg center-sm">
  <div class="col-xs-4" *ngFor="let widget of widgets" >
      <div class="box">
         <div [innerHTML]="widget | sanitizeHtml"></div>
      </div>
  </div>
</div>

the result is :

<div _ngcontent-ynr-3="" class="row center-xs center-md center-lg center-sm">
  <!--template bindings={"ng-reflect-ng-for-of": "<app-widget-resume></app-widget-resume>,<app-widget-my-courses-learner></app-widget-my-courses-learner>,<app-widget-my-courses-teacher></app-widget-my-courses-teacher>,<app-widget-my-calendar></app-widget-my-calendar>,<app-widget-virtual-classes></app-widget-virtual-classes>"}-->
    <div _ngcontent-ynr-3="" class="col-xs-4">
      <div _ngcontent-ynr-3="" class="box">
         <div _ngcontent-ynr-3="" ng-reflect-inner-h-t-m-l="<app-widget-resume></app-widget-resume>"><app-widget-resume></app-widget-resume></div>
      </div>
  </div><div _ngcontent-ynr-3="" class="col-xs-4">
      <div _ngcontent-ynr-3="" class="box">
         <div _ngcontent-ynr-3="" ng-reflect-inner-h-t-m-l="<app-widget-my-courses-learner></app-widget-my-courses-learner>"><app-widget-my-courses-learner></app-widget-my-courses-learner></div>   
      </div>
  </div><div _ngcontent-ynr-3="" class="col-xs-4">
      <div _ngcontent-ynr-3="" class="box">
         <div _ngcontent-ynr-3="" ng-reflect-inner-h-t-m-l="<app-widget-my-courses-teacher></app-widget-my-courses-teacher>"><app-widget-my-courses-teacher></app-widget-my-courses-teacher></div>
      </div>
  </div><div _ngcontent-ynr-3="" class="col-xs-4">
      <div _ngcontent-ynr-3="" class="box">
         <div _ngcontent-ynr-3="" ng-reflect-inner-h-t-m-l="<app-widget-my-calendar></app-widget-my-calendar>"><app-widget-my-calendar></app-widget-my-calendar></div> 
      </div>
  </div><div _ngcontent-ynr-3="" class="col-xs-4">
      <div _ngcontent-ynr-3="" class="box">
         <div _ngcontent-ynr-3="" ng-reflect-inner-h-t-m-l="<app-widget-virtual-classes></app-widget-virtual-classes>"><app-widget-virtual-classes></app-widget-virtual-classes></div>
      </div>
  </div>
</div>

Finally, my components are not rendered and I don't know to solve my problem

Sounds like http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 shows how to do what you want. — Günter Zöchbauer, Oct 13 '16 at 06:22

score 0 · Answer 1 · edited May 23 '17 at 12:32

Its not possible to do it like that. You need to compile that components so angular will evaluate each tag, transform the html to its template and initialize its controller (the class). Since rc5 you cannot compile a single component but you need to put them in an NgModule. You should be able to find it like "Angular 2 dynamically compile module" Angular2 RC5 dynamically compile component with correct module

innerHTML will not force angular to evaluate the tags and turn them into components

How to implement angular2 components via their name with ngFor?

1 Answers1