Colouring a verse based on the gender - html

Question

I have to make a list in which the lines with gender - male will be green and gender - female will be yellow (so far I have everything yellow). I've tried with some condition, assignment, but I'm still at the starting point. Could someone direct me?
<div class="col-sm-12 pt-5 text-right">
<div class="col-md-12">
<button type="button" class="btn btn-primary" (click)="onClickAddTodo()">Add Todo</button>
</div>
</div>
<div class="col-sm-12 pt-2">
<div class="col-md-12">
<table class="table table-bordered table-hover table-striped">
<thead class="table-primary">
<tr>
<th scope="col" class="text-center">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email</th>
<th scope="col">Street</th>
<th scope="col">Gender</th>
<th scope="col">Phone</th>
<th scope="col" class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let todo of todos" style="background-color:yellow;">
<td class="text-center">{{todo.id}}</td>
<td>{{todo.firstName}}</td>
<td>{{todo.lastName}}</td>
<td>{{todo.email}}</td>
<td>{{todo.street}}</td>
<td>{{todo.gender}}</td>
<td>{{todo.phone}}</td>
<td width="150" class="text-center">
<button type="button" class="btn btn-info btn-sm mr-2" (click)="onClickEditTodoDetail(todo.id)">Edit</button>
<button type="button" class="btn btn-danger btn-sm" (click)="onClickTodoDelete(todo.id)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Thank you!

Answer 1

Where you change your td background-color, you should add a condition, like this:
Instead of this:
<tr *ngFor="let todo of todos" style="background-color:yellow;">
Make it like this:
<tr *ngFor="let todo of todos" [style.background]="todo.gender == 'Female' ? 'yellow' : 'green'>