[Table] Be able to wrap columns into a re-usable component

[Twois]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I would like to outsource the columns into a component

What is the current behavior?

I got this error msg:

If I use tag selector instead of attribute selector, I got the this: ERROR Error: Could not find column with id "title". at getTableUnknownColumnError (table.es5.js:651)

What are the steps to reproduce?

The table:

<table mat-table [dataSource]="data" matSort>
    <ng-container myField="title" appearance="outline" label="Search" header="Title"></ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns" class="first-header-row"></tr>

    <tr mat-header-row *matHeaderRowDef="displayedSearchColumns"class="second-header-row" 
                        style="height: auto; padding: 10px 0;"></tr>

    <tr mat-row *matRowDef="let row; columns: displayedColumns;" style="height: auto;"></tr>
</table>

my-field.component.ts

import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core';

@Component({
// moduleId: module.id,
selector: '[myField]',
templateUrl: './grid-field.component.html',
styleUrls: ['grid-field.component.scss']
})
export class GridFieldComponent implements OnInit, OnDestroy {
    public _class: string = 'GridFieldComponent';
    private nsp: string;

    @Input() label: string;
    @Input() header: string;
    @Input() option: string;
    @Input() appearance: string;
    @Input() placeholder: string;
    @Input() myField: string;

    @Output() onChange: EventEmitter<any> = new EventEmitter();

    constructor() {}

    public ngOnInit() {}

    public ngOnDestroy() {}

    public applyFilter(value) {
        const self = this;

        self.onChange.emit({
            'field': `-${self.myField}`,
            'value': value,
            'option': self.option
        })
    }
}

my-field.component.html

<ng-container [matColumnDef]="myField + '-search'">
    <th mat-header-cell fxFlex *matHeaderCellDef>
        <mat-form-field [appearance]="appearance">
            <mat-label>{{label}}</mat-label>
            <input matInput (keyup)="applyFilter($event.target.value)" [placeholder]="placeholder">
        </mat-form-field>    
    </th>
</ng-container>

<ng-container [matColumnDef]="myField">
    <th mat-header-cell fxFlex fxLayoutAlign="start center" *matHeaderCellDef> 
        <div fxFlex="nogrow" mat-sort-header>{{header}}</div> 
    </th>
    <td mat-cell fxFlex fxLayoutAlign="start center" *matCellDef="let row"> {{row[myField]}} </td>
</ng-container>

What is the use-case or motivation for changing an existing behavior?

There are many case when this mean we can be able to save hundreds of lines.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

angular 7.0.2 material 7.0.2 win 10 typescript 3.1.3

Is there anything else we should know?

I tried with div or ng-template instead of ng-container element, but nothing was good.

[literalpie]

I looked into doing something like this recently and got something working stackblitz. Notice that the "check" contents of the last column comes from the extra-column component

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.