title: How to load multiple child components in angular2 using ngFor?
body: <p>I have created few child components with given names using dynamic Component loader in angular2.
  &amp; I am able to load them using their selectors in static way.</p>
  
  <p>for eg.
  I can load my component using</p>
  
  <p><code>&lt;DYNAMIC-BODY-1&gt;Loading&lt;/DYNAMIC-BODY-1&gt;</code></p>
  
  <p>But my problem is that these component names are stored in json file.
  So I want to read that JSON File &amp; load that component using its variable name.</p>
  
  <p>for eg.
  if <code>uiComponent="DYNAMIC-BODY-1";</code>
  then i should be able to load my component as <code>&lt;{{uiComponent}}&gt;Loading&lt;/{{uiComponent}}&gt;</code></p>
  
  <p>here is my html:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div *ngFor="#comp of record"&gt;        
          &lt;div *ngFor="#pRow of comp.pageObj.pageRows"&gt;
              &lt;div *ngFor="#sec of pRow.sections"&gt;
                  &lt;div *ngFor="#sRow of sec.sectionRows" class="col-md-{{(12/3)}}"&gt;
                      &lt;div *ngFor="#srColumn of sRow.secRowColumns"&gt;
                         //prints component name i.e. DYNAMIC-BODY-1
                         {{srColumn.uiComponent}} 
                         //Loads the component
                         &lt;DYNAMIC-BODY-1&gt;Loading&lt;/DYNAMIC-BODY-1&gt;
                         //what I want to achieve,this does not work
                         &lt;div [innerHTML]="'&lt;' + srColumn.uiComponent+ '&gt;&lt;/' + srColumn.uiComponent + '&gt;'"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried multiple ways ,but I am not able to get the result.
  Is there any way to do that?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component,DynamicComponentLoader,Injector} from 'angular2/core';
  import {NgSwitch, NgSwitchWhen, NgSwitchDefault,NgFor} from 'angular2/common';
  import {Http, Response} from 'angular2/http';
  import {Observable} from 'rxjs/Rx';
  import { DataService } from '../../app/services/data.service';
  import {DynamicBody1Component} from './../DYNAMIC-BODY-1/DYNAMIC-BODY-1.component'
  import {DynamicBody2Component} from './../DYNAMIC-BODY-2/DYNAMIC-BODY-2.component'
  import {FooterComponent} from './../FOOTER/FOOTER.component'
  import {HeadingComponent} from './../heading/heading.component'
  import {ImageComponent} from './../IMAGE/IMAGE.component'
  import {StaticBodyComponent1} from './../STATIC-BODY-1/STATIC-BODY-1.component'
  import {StaticBodyComponent2} from './../STATIC-BODY-2/STATIC-BODY-2.component'
  
  @Component({
      selector: 'Parser',
      providers: [DataService],
      templateUrl: 'app/Parser/Parser.component.html',   
      directives: [DynamicBody1Component, DynamicBody2Component, FooterComponent,HeadingComponent,ImageComponent,StaticBodyComponent1,StaticBodyComponent2]
  })
  export class ParserComponent {
      public record;
      public componentName;
      public absolutePath;    
      constructor(dcl: DynamicComponentLoader, injector: Injector,private dataService: DataService) { 
          
      }
      ngOnInit() {        
          this.componentName="Parser";
          this.absolutePath="app/"+this.componentName+"/"+this.componentName+"-MODEL.json";        
          this.dataService.getData(this.absolutePath)
          .subscribe((data:any[]) =&gt; {
              this.record = data;
              console.log(this.componentName);
          });   
    }  
    subscribe({
      complete: () =&gt; {setTimeOut(() =&gt; {
          dcl.loadAsRoot(DynamicBody1Component, '#dynamic-body-1', injector);
          dcl.loadAsRoot(DynamicBody2Component, '#dynamic-body-2', injector);
          dcl.loadAsRoot(FooterComponent, '#footer', injector);
          dcl.loadAsRoot(HeadingComponent, 'heading', injector);
          dcl.loadAsRoot(ImageComponent, '#image', injector);
          dcl.loadAsRoot(StaticBodyComponent1, '#static-body-1', injector);
          dcl.loadAsRoot(StaticBodyComponent2, '#static-body-2', injector); 
      }, 1)});
  }</code></pre>
  </div>
  </div>
  </p>