Angular2: replace host element with component's template

Question

I\'m new to angular in general and to angular2 specifically. I\'m trying to write a container component, which should have child components in it.

Answer 1

Finally I found solution: injecting ElementRef to MyItem and using its nativeElement.innerHTML:

MyList:

import { Component, ContentChildren, QueryList } from 'angular2/core'
import { MyItem } from './myitem'

@Component({
  selector: 'my-list',
  template: `
    

      

    
  `
})
export class MyList {
  @ContentChildren(MyItem) items: QueryList
}

MyItem:

import { Directive, Inject, ElementRef } from 'angular2/core'

@Directive({selector: 'my-item'})
export class MyItem {
  constructor(@Inject(ElementRef) element: ElementRef) {
    this.innerHTML = element.nativeElement.innerHTML
  }
}

Working plunk is here