Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to put condition on table row color by the table data?

I am creating a table from two arrays using ngFor

    <tr *ngFor="let e of lis1; let k=index">
        <td>{{e}}  </td>
        <td>{{lis2[k]}}</td>
    
    </tr>

and the table created is something like this

Name  Age
a     15
b     20
c     25

I want to change the color of the row which has an age greater than 20.
How to put this condition??
I am using angular typescript.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

in lis1 I have an array of names(a,b,c)
andin lis2 I have an array of age(15,20,25)

>Solution :

There are different ways you can add styles to your element conditionally, ngStyle, ngClass, directly with attributes, etc.

I’ll show You how to add styles using ngClass. You can simply check if the age is greater than 20 in [ngClass] to apply the class otherwise not.

<tr *ngFor="let e of lis1; let k=index" [ngClass]="{'background-red': lis2[k] > 20}">
     <td>{{e}}  </td>
     <td>{{lis2[k]}}</td>  
</tr>

In your CSS component simple add the class

.background-red{
     background-color: red;
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading