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

There is a hacky workaround solution that may not be supported in older browser versions, but it was working for mine project and I think it is quite easy to integrate without changing or adding a lot of code.

First you need to change selector of MyItem class/component from element selector

selector: 'custom-element-name'

to attribute selector

selector: '[customAttributeName]'

and finally use html slot element to wrap MyItem inside MyList html template

Full code:

import { Component } from 'angular2/core'

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

      
    
  `
})
export class MyList {
}


@Component({
  selector: '[myItemAsAtribute]',
  template: `
      
{{item}}

  `
})
export class MyItem {
}