title: Angular 2 Dynamic Template Directives does not work
body: <p>I have a component which takes in a dynamic template which looks like this:</p>
  
  <pre><code>&lt;ion-list&gt;
    &lt;ion-item-sliding *ngFor="let entity of entityList" #item&gt;
      &lt;ion-item (click)="navigateToDetail(entity.id)"&gt;
        &lt;template [ngTemplateOutlet]="template" [ngOutletContext]="{entity: entity}"&gt;&lt;/template&gt;
      &lt;/ion-item&gt;
      &lt;ion-item-options side="right"&gt;
        &lt;button ion-button color="danger"  *ngIf="config &amp;&amp; config.canDelete" (click)="delete(entity.id)"&gt;
          &lt;ion-icon name="trash"&gt;&lt;/ion-icon&gt;Delete
        &lt;/button&gt;
        &lt;button ion-button color="dark" &gt;
          &lt;ion-icon name="more"&gt;&lt;/ion-icon&gt;More
        &lt;/button&gt;
      &lt;/ion-item-options&gt;
    &lt;/ion-item-sliding&gt;
    &lt;ion-list-header&gt;
      &lt;button *ngIf="config &amp;&amp; config.canCreate" (click)="create()"
              ion-button full color="secondary"&gt;
        Create New&lt;ion-icon name="add"&gt;&lt;/ion-icon&gt;
      &lt;/button&gt;
    &lt;/ion-list-header&gt;
  &lt;/ion-list&gt;
  </code></pre>
  
  <p>and the typescript looks like so:</p>
  
  <pre><code>export class PageListBaseComponent&lt;T extends IHasId&gt; {
  
      @Input() template: TemplateRef&lt;any&gt;;
      @Input() detailPageType: any;
      @Input() config: PageListConfiguration
      @Input() set baseProvider(provider: ProviderBase&lt;T&gt;) {
          provider.getList().subscribe(entities =&gt;  {
              this.entityList = entities;
              console.log(entities);
          });
      }
  
      public entityList: T[];
  
      constructor(public navCtrl: NavController, public navParams: NavParams) {
          console.log("ctor");
      }
  
      create() {
          if (this.config &amp;&amp; this.config.canCreate) {
              //TODO: initialize entity
              let entity = {}
              this.navCtrl.push(this.detailPageType, { entity });
          }
      }
  
      delete(id: number) {
          console.log(id);
  
          if(this.config &amp;&amp; this.config.canDelete)
          {
              this.baseProvider.deleteById(id).subscribe(result =&gt; {
                  console.log(result);
              });
          }
      }
  
      navigateToDetail(id: number) {
          this.navCtrl.push(this.detailPageType, { id })
      }
  }
  </code></pre>
  
  <p>And then I have a template that looks like so:</p>
  
  <pre><code>&lt;template #myTemplate let-entity="entity"&gt;
    &lt;ion-item&gt;
      &lt;ion-avatar item-left&gt;
        &lt;img src="http://modexenergy.com/wp-content/themes/modex_wp/img/avatar.png"&gt;
      &lt;/ion-avatar&gt;
      &lt;h2&gt;{{ entity.email }}&lt;/h2&gt;
      &lt;ion-icon name="arrow-forward" item-right&gt;&lt;/ion-icon&gt;
    &lt;/ion-item&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>My issue is the <code>&lt;ion-item&gt;</code>  Right now I need to use it twice which I do not want to do,  For some reason if i try and render the items dynamically they do not appear in the list, so I need to leave <code>&lt;ion-item&gt;</code> wrapping the template, that would be fine, except the directives don't respect there parent.  Meaning if I use the <code>item-left</code> directive in a template, and the template does not include an <code>&lt;ion-item&gt;</code> my directives are ignored.  </p>
  
  <p>What can I do to fix this,  if I can get away with out using both that would be nice, but if not is there a way render the first <code>&lt;ion-item&gt;</code> with no style?</p>