Using ngClass for selected value for a background color change

Using ngClass for selected value for a background color change

I want to change the background color of value selected. I have tried it using ng class and ngmodel but is not working as per expectations. Below is my parent ts file.

I want to change the background color of value selected. I have tried it using ng class and ngmodel but is not working as per expectations. Below is my parent ts file.

users = USERS;
selectedUser = 0;
isSelected = false;

constructor() { }

ngOnInit() { }

onSelect(index): void { this.selectedUser = index; console.log(this.selectedUser); } }

Below is my parent html file.

<div class="row details-container">
<div class="col-md-4 col-sm-12">
<table class="table table-striped table-bordered table-hover">
  <tr *ngFor="let user of users; let i = index" (click)="onSelect(i)" [ngClass]="{select: isSelected}">
    <td>{{ user.name }}</td>
  </tr>
</table>
</div>
<div class="col-md-8 col-sm-12" >
<app-child-detail [(ngModel)]="isSelected" [users]="users[selectedUser]"> 
</app-child-detail>
</div>
</div>

Added following in my css file:

 .select {
 background-color: black;
 }

Following is my child component html file:

<table class="table table-striped table-bordered table-hover">
<tr>
<td><b>Id: </b>{{ users.id }}</td>
<td><b>Name:</b>{{ users.name }}</td>
<td><b>Location:</b>{{ users.location }}</td>
 </tr>
</table>

I want to use ngclass only for selected value for changing its background

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

TypeScript, Angular, Firebase & Angular Material Master class Tutorial

As the course progresses, you'll get familiar with: TypeScript, Angular Application Architecture, and Angular CLI. Angular Modules and Angular Components. Angular's Component LifeCycle Hooks....

Angular Tutorial: Create a CRUD App with Angular CLI and TypeScript

Angular Tutorial: Create a CRUD App with Angular CLI and TypeScript. This tutorial gets you off the ground with Angular. We are going to use the official CLI (command line) tool to generate boilerplate code.

Angular: Novidades Angular v9 Ivy: TypeScript 3.7

Mais um vídeo da série sobre Angular v9 e Angular Ivy! Esse tutorial é uma dica rápida mostrando as duas maiores novidades to TypeScript 3.7 que é o operador de optional chaining e o operador de coalescência nula.