title: Angular 2Injecting Components at run time using Interfaces
body: <p>Been messing around in angular 2 and I'm trying to create a list component that can display multiple types of list items. </p>
  
  <p>My approach was to create the various types of ListItemComponents separately and have them implement an IListItemComponent interface. Then I would specify what type of listItemComponent my listComponent will use through my parent component (homepage). </p>
  
  <p>home.component.html (Parent)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Home&lt;/h2&gt;
   &lt;infinite-scroll&gt;Loading&lt;/infinite-scroll&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>home.component.ts (Parent)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, provide, ViewChild } from '@angular/core';
  import {InfiniteScrollComponent} from '../../core/components/infinite_scroll/infinite_scroll.component';
  import { ImageBoardService } from '../../core/services/test.image_board.service';
  import { DataProviderToken } from '../../core/injection/data_provider.token';
  import {ImageBoardItemComponent} from '../../core/components/image_board_item/image_board_item.component';
  
  @Component({
      moduleId: module.id,
      selector: '&lt;home&gt;&lt;home&gt;',
      templateUrl: './home.component.html',
      directives: [InfiniteScrollComponent],
      providers: [provide(DataProviderToken, {useClass: ImageBoardService})]
  })
  export class HomeComponent implements OnInit {
  
      @ViewChild(InfiniteScrollComponent) private component: InfiniteScrollComponent;
  
      constructor() {
      }
      ngOnInit() {
          this.component.setItemComponent(ImageBoardItemComponent);
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>infinite_scroll_component.html (List)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="infinate_scroll"&gt;
      &lt;div #container&gt; 
              
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>infinite_scroll_component.ts (List)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, Compiler, OnInit, Inject, ViewChild, ViewContainerRef,
          ComponentRef, ComponentFactory, ComponentFactoryResolver} from '@angular/core';
  import {IDataProvider} from '../../interfaces/data_provider.interface';
  import { DataProviderToken } from '../../injection/data_provider.token';
  import { IListItemComponent } from '../../interfaces/list_item_component.interface';
  
  @Component({
      moduleId: module.id,
      selector: 'infinite-scroll',
      templateUrl: 'infinite_scroll.component.html'
  })
  export class InfiniteScrollComponent implements OnInit {
  
      @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;
      private componentFactory: ComponentFactory&lt;any&gt;;
  
      private _dataProvider: IDataProvider;
      private _component: IListItemComponent;
      items: Array&lt;any&gt;;
  
      setItemComponent= function setItemComponent(component: IListItemComponent){
          this._component = component;
            this.viewContainerRef.createComponent(this.componentFactory, 0);
      };
  
      constructor(@Inject(DataProviderToken) private dataProvider: IDataProvider,
                  componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler) {
          this.componentFactory = componentFactoryResolver.resolveComponentFactory(this._component);
          this._dataProvider = dataProvider;
      }
      ngOnInit() {
         this.items = this._dataProvider.get();
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>list_item_component.interface.ts (List Item Interface)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export  interface IListItemComponent {
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>image_board_item.html (List Item)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
      &lt;div&gt;{{test}}&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>image_board_item.component.ts (List Item)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { IListItemComponent} from '../../interfaces/list_item_component.interface';
  
  @Component({
      moduleId: module.id,
      selector: 'image-board-item',
      templateUrl: 'image_board_item.html'
  })
  export class ImageBoardItemComponent implements IListItemComponent {
      test = 'test';
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am having trouble with the following line within 
  <a href="http://i.stack.imgur.com/AM7af.png" rel="nofollow">infinite_scroll_component.html</a></p>
  
  <p>Still not sure if what I'm trying to do is possible. Can I pass a component from my homepage to my list component which accepts an interface rather than a component. Then Inject it at run-time?</p>