Hello there, I'm in need of some assistance with a coding issue. I have a parent component named "users-list" that displays a list of child components called "user" using *ngFor. Each component's class is dynamic and depends on various internal variables. When a user clicks on a component to select it, the class changes accordingly. Currently, users can select multiple components, but I want to ensure that only one is selected at any given time. How can I achieve this desired functionality?
Below is the code snippet:
Parent Component:
import { Component, Input, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { User } from '../user';
import { UtilsService } from '../utils.service';
@Component({
selector: 'app-users-list',
templateUrl: './users-list.component.html',
styleUrls: ['./users-list.component.css']
})
export class UsersListComponent implements OnInit {
usersList : User[] = []
filteredUsersList : User[] = []
usersSub : Subscription = new Subscription
selectedClassNmae : String = "card-selected"
searchValue = ""
search(searchValue : string)
{
this.filteredUsersList = this.usersList.filter(x => x.name.includes(searchValue) || x.email.includes(searchValue))
}
constructor(private utils : UtilsService) { }
ngOnInit(): void {
this.usersSub = this.utils.getUsers().subscribe((data : any) =>
{
this.usersList = data
this.filteredUsersList = data
})
}
ngOnDestroy()
{
this.usersSub.unsubscribe();
}
}Child Component:
import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs';
import { User } from '../user';
import { UtilsService } from '../utils.service';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
@Input()
user : User | undefined
otherData : boolean = false
editData : boolean = false
...
}.card-completed {
max-width: 400px;
background-color: rgb(239, 248, 239);
border-style: solid;
border-color: #25a18e;
}
...
<br/>