angular - How to add columnDefinitions into md-table from my component content -


i'm starting in angular 2 , didn't found this.

how said in title, i've component column definitions set in content, this:

        <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 component template:

<div id="ls" fxflexfill>     <md-table [datasource]="datasource" mdsort>         <!-- add each contentchildren of 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 component ts 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 can't figure out how use columndefinitions taken @contentchildren put in md-table content. , don't know if i'm doing right too. goal have column definitions in content of component , md-table. how that?

try this. don't know if work, worth shot.

<md-table [datasource]="datasource" mdsort>    <!-- selectively pass 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> 

Comments

Popular posts from this blog

node.js - Node js - Trying to send POST request, but it is not loading javascript content -

javascript - Replicate keyboard event with html button -

javascript - Web audio api 5.1 surround example not working in firefox -