Nested Templates in Angular 2 [duplicate]

Answer 1

You could try the following solution:

@Component({
  selector: 'DropDownList',
  template: `
   

    
   
`
})
export class DropDownListComponent {
  @Input() itemWrapper: TemplateRef;
  @Input() items: any;
  handleOnSelect(item) {
   console.log('clicked');
  }
}

@Component({
  selector: 'DropDown',
  template: `
    

      

          
          
      
    
`
})
export class DropDownComponent {
  @Input() items: string[];
  @ContentChild(TemplateRef) itemWrapper: TemplateRef;
} 

@Component({
  selector: 'my-app',
  template: `
     
       
    
  `
})
export class App { 
   items = ['this','is','a','test'];
}

Plunker Example

The ngTemplateOutlet(^2.0.0-rc.2) directive has the same functionality as your custom directive NgWrapper

See also related questions:

• Creating a dynamic repeater with ng-content transclusion with Angular2
• Switch html templates dynamically during runtime on user action in angular 2