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

I have created the below custom table component, on top of angular material table component.

Following were my business requirement,

1. every cell can have multiple component OR plain text OR image.
2. table should be sortable
3. column might not have header values(empty header) but can have cell content.

So I need to have the full control on each cell template and the events raised by any element from within the cell.

customTable.component.html

  
    
      
        {{col?.headerCol}}
      
      
        
        
        
          {{row[col.displayCol]}}
        

      
    

    
    

  

customTable.component.ts

import { Component, Input, ViewChild, AfterViewInit, OnChanges, Output, EventEmitter, TemplateRef, SimpleChanges, ContentChild, ContentChildren } from '@angular/core';
import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material';
import { DataSource } from '@angular/cdk/table';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

export interface TableColumns {
    displayCol: string;
    headerCol: string;
}

export interface TableSortEventData {
    sortColumn: string;
    sortOrder: string;
}

export interface PayloadType {
    row: any;
    options?: any;
}


@Component({
    selector: 'custom-mat-table',
    templateUrl: './customTable.component.html',
    styleUrls: ['./customTable.component.scss']
})
export class NgMatTableComponent implements OnChanges, AfterViewInit {
    @Input() templateNameList: Object;
    @Input() tableColumns: TableColumns[] = [];
    @Input() tableDataList: T[] = [];
    @Output() cellClicked: EventEmitter = new EventEmitter();
    @Output() onSort: EventEmitter = new EventEmitter();
    displayedColumns: string[] = [];
    tableDataSource: TableDataSource;
    @ViewChild(MatSort) sort: MatSort;

    constructor() {
        this.tableDataSource = new TableDataSource();
    }

    onCellClick(e: T, options?: any) {
        this.cellClicked.emit({ 'row': e, 'options': options });
    }

    ngOnChanges(change: SimpleChanges) {
        if (change['tableDataList']) {
            this.tableDataSource.emitTableData(this.tableDataList);
            this.displayedColumns = this.tableColumns.map(x => x.displayCol);
        }

    }

    ngAfterViewInit() {
        this.tableDataSource.sort = this.sort;
    }

    sortTable(e: any) {
        const { active: sortColumn, direction: sortOrder } = e;
        this.onSort.emit({ sortColumn, sortOrder });
    }

}

export class TableDataSource extends DataSource {

    tableDataSubject = new BehaviorSubject([]);
    sort: MatSort | null;
    private _sort;

    constructor() {
        super();
    }

    emitTableData(data: T[]) {
        this.tableDataSubject.next(data);
    }

    connect(): Observable {
        return this.tableDataSubject.asObservable();
    }

    disconnect() {
        this.tableDataSubject.complete();
    }
}

in the parent.component.html

    

        
        {{item?.processedName}}
    


    
{{item?.status | TextCaseConverter}}



    

        {{item?.lastname}}

parent.component.ts

columnList: TableColumns[] = [
    { displayCol: 'firstname', headerCol: 'First Name' },
    { displayCol: 'lastname', headerCol: 'Last Name' },
    { displayCol: 'status', headerCol: 'Status' }
];

templateList: Object = "{'firstname':firstname,'lastname':lastname,'status':status}";

onTableSort(e: TableSortEventData) {
    this.sortQueryParam = {};
    if (e && e.sortOrder !== '') {
        this.sortQueryParam['sortBy'] = e.sortColumn;
        this.sortQueryParam['order'] = e.sortOrder.toUpperCase();
    }
    else {
        this.sortQueryParam = null;
    }
}