Get multiple ng-template ref values using contentChildren in angular 5

Question

I am trying to pass multiple ng-template to my reusable component (my-table component), content projection. Now I need to get the reference value of ea

Answer 1

There is another approach for creating the custom table component. Instead of exposing just the columns, you can have the access to the entire rows. So you can have the direct control over the entire columns.

custom-table.component.html

    
        
            
            
        
            
            
        



    {{caption}}




    
        {{column.title}}
    




    
        {{item[column.key]}}
    




    
        {{item[column.key]}}
    

custom-table.component.ts

import {
  Component,
  OnInit,
  Input,
  TemplateRef,
  ContentChild
} from "@angular/core";

@Component({
  selector: "app-custom-table",
  templateUrl: "./custom-table.component.html",
  styleUrls: ["./custom-table.component.css"]
})
export class CustomTableComponent implements OnInit {
  @Input()
  caption: string;

  @Input()
  columns: { title: string; key: string }[] = [];

  @Input()
  values: any[] = [];

  @Input()
  footerValues: any[] = [];

  @ContentChild("caption", { static: false })
  captionTemplate: TemplateRef;

  @ContentChild("header", { static: false })
  headerTemplate: TemplateRef;

  @ContentChild("body", { static: false })
  bodyTemplate: TemplateRef;

  @ContentChild("footer", { static: false })
  footerTemplate: TemplateRef;

  constructor() {}

  ngOnInit() {}
}

Now you can provide the details as follows,

    
    
        Custom Table
    

    
    
        
            [{{column.title}}]
        
    

    
    
        
            
                {{item[column.key]}}
                {{item[column.key]}}
            
        
        
            
                {{item[column.key]}}
            
        
    

    
    
        
            {{item.copyrightDetails}}
        
    

I have created a stackblitz for the same. Please refer this.