CODEWITHSUNDEEP
cssangular
Pratik Kelwalkar
Pratik Kelwalkar

Reputation: 1632

Hiding table data <td> using [ngStyle] Angular2

I am trying to hide a table data using the following:

<td *ngFor="let tableHeaderItem of gridHeaderData" 
    [ngStyle]="{'hidden' : tableHeaderItem.hidden ? 'none' : 'table-cell'}">

but it isn't working. I tried removing the quotes 'hidden' to hidden but it just doesn't work.

Upvotes: 2

Views: 2131

Answers (3)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657536

Instead of ngStyle you can also use the hidden property:

<td *ngFor="let tableHeaderItem of gridHeaderData" 
    [hidden]="tableHeaderItem.hidden">

Upvotes: 0

Pratik Kelwalkar
Pratik Kelwalkar

Reputation: 1632

what a mistake!... ur rite, alternately i made it working by doing to following

[style.display]="tableHeaderItem.hidden ? 'none' : 'table-cell'"

Upvotes: 3

David Pine
David Pine

Reputation: 24535

You need to have a CSS class named hidden that has display: none for this to work. Otherwise you could try the following:

<td *ngFor="let tableHeaderItem of gridHeaderData" 
    [ngStyle]="{'display' : tableHeaderItem.hidden ? 'none' : 'table-cell'}">

See the official Angular2 documentation on the ngStyle directive for more details.

You could also use [style.display] like this:

<td *ngFor="let tableHeaderItem of gridHeaderData" 
    [style.display]="tableHeaderItem.hidden ? 'none' : 'table-cell'">

Upvotes: 5

Related Questions