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 to share