How to add columnDefinitions to md table from my component content

I am starting with Angular 2 and haven't found anything like this.

As I said in the title, I have a component with the column definitions given in the content, for example:

        <tabela-com-consulta [dataSource]="ds">
            <ng-container cdkColumnDef="id">
                <md-header-cell *cdkHeaderCellDef md-sort-header >ID</md-header-cell>
                <md-cell *cdkCellDef="let row">{{row.id}}</md-cell>
            </ng-container>
            <ng-container cdkColumnDef="nome">
                <md-header-cell *cdkHeaderCellDef md-sort-header>Name</md-header-cell>
                <md-cell *cdkCellDef="let row">{{row.name}}</md-cell>
            </ng-container>
        </tabela-com-consulta>

      

Now this is my component template:

<div id="ls" fxFlexFill>
    <md-table [dataSource]="dataSource" mdSort>
        <!-- Add this for each ContentChildren of my component
                <ng-container cdkColumnDef="id">
                    <md-header-cell *cdkHeaderCellDef md-sort-header>ID</md-header-cell>
                    <md-cell *cdkCellDef="let row">{{row.id}}</md-cell>
                </ng-container>
         -->
        <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
        <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
    </md-table>
</div>

      

And the ts component code:

@Component({
    selector: 'tabela-com-consulta',
    templateUrl: 'tabela_com_consulta.component.html',
    styleUrls: ['tabela_com_consulta.component.css']
})
export class TabelaComConsultaComponent<T> implements OnInit, OnDestroy, AfterViewInit {

[...]

    @ContentChildren(CdkColumnDef) columnDefinitions: QueryList<CdkColumnDef>;

    ngAfterViewInit() {

    }
}

      

I cannot figure out how to use the columnDefinitions parameters taken from @ContentChildren to host the content of the md-table. And I don't know if I'm doing it right. My goal is to define columns in the content of my component and its in the md table. How to do it?

+3


source to share


1 answer


Try it. I don't know if this will work, but worth it.



<md-table [dataSource]="dataSource" mdSort>

  <!-- This will selectively pass the content of 'tabela-com-consulta' -->
  <ng-content select="[cdkColumnDef]"></ng-content>

  <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
  <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
</md-table>

      

0


source







All Articles