How to render multiple ng-content inside an ngFor loop using Angular 4?

Question

I\'m trying to display two differents ng-content inside two ngFor loops. But as described in this answer, Angular can\'t project ng-content multipl

Answer 1

The best option in your case would be trancluding ng-template by using ngTemplateOutlet like:

  
    

     {{line.name}}
    
  
   
    

      {{element.name}}
    
   

app-table.component.ts

@Component({
  selector: 'app-table',
  template: `
    

      
      

        
      
    
  `
})
export class AppTableComponent  {
  @Input() data: any;

  @ContentChild('lineHeader') lineHeaderTmpl: TemplateRef; 
  @ContentChild('lineContent') lineContentTmpl: TemplateRef; 
}

Stackblitz Example