CODEWITHSUNDEEP
angularstylesconditional-statements
Anna Lee
Anna Lee

Reputation: 951

apply conditional style in angular 2

I am trying to apply conditional styles for example, there is obsolete property in user, if a user's obsolete is true, I would like to add <del> like below. I searched internet, but I don't know well what is the best way. I know that *ngIf, so I could use it, but I think there is more smart way. If someone used to this, could you please let me know?

<tr *ngFor="let user of pagedItems">
           <td align="left">{{user.name}}</td>
           <td align="left">{{user.age}}</td>
</tr>


<tr *ngFor="let user of pagedItems">
           <td align="left"><del>{{user.name}}</del></td>
           <td align="left"><del>{{user.age}}</del></td>
</tr>

Upvotes: 3

Views: 1888

Answers (1)

Peza
Peza

Reputation: 232

You could do the following:

<tr *ngFor="let user of pagedItems">
    <td align="left">
        <span [class.obselete]="user.obsolete">{{user.name}}</span>
    </td>
    <td align="left">
        <span [class.obselete]="user.obsolete">{{user.age}}</span> 
    </td>
</tr>

This would apply the css class .obselete to the text if your user.obsolete = true.

CSS for line-through:

    .obselete { 
        text-decoration: line-through; 
    }

Upvotes: 4

Related Questions