CODEWITHSUNDEEP
angulartypescriptangular2-template
Geoff
Geoff

Reputation: 6639

Angular2 setting property in a table column programmatically

I am using primeng2 and I would like to set the frozen columns

I am retrieving columns from a rest API in JSON form

colheaders:any[] = [];

getColumnheaders(){
   this.bookService.getColumns()
     .subscribe(
      res=>{
       this.colheaders = res
       }
     )
 }

On the html I have

<p-dataTable [value]="cars" scrollable="true" frozenWidth="1200px" unfrozenWidth="600px" [style]="{'margin-top':'30px'}">

     <p-column sortable="true" *ngFor="let col of colheaders" [field]="col.field" [header]="col.header"
               [frozen]="col.frozen"></p-column>


 </p-dataTable>

The above p-column fails when setting its value to false

In a quick googling I found that I need not to set the value of frozen whether true or false

so for the frozen columns I should have something like

   <p-column sortable="true"  [frozen]="true"></p-column>

And the unfrozen columns should have

       <p-column sortable="true"></p-column>  //no frozen property

So how do I go about it

so in normal words should be something like this

 <p-column sortable="true" *ngFor="let col of colheaders"
               * *ngIf="(col.frozen)" //stuck on how to go on ></p-column>

Upvotes: 1

Views: 202

Answers (1)

Vega
Vega

Reputation: 28708

Wrap the <p-column> tag to ng-container, which doesn't have any DOM representation, and then move ngFor in it. You can keep ngIf in p-column:

<p-dataTable [value]="cars" scrollable="true" frozenWidth="1200px" unfrozenWidth="600px" [style]="{'margin-top':'30px'}">
   <ng-container *ngFor="let col of colheaders"> 
       <p-column sortable="true" [field]="col.field" [header]="col.header"
               *ngIf="col.frozen" [frozen]="true"></p-column>
       <p-column sortable="true" [field]="col.field" [header]="col.header"
               *ngIf="!col.frozen"></p-column>
    </ng-container>

</p-dataTable>

Upvotes: 1

Related Questions