https://i.stack.imgur.com/DS9jQ.jpgI have an array of individuals that I am looping through. It's a bit difficult for me to explain, but I want something like this:
<div *ngFor="let person of persons">
{{person.name}} {{person.surname}}
<button class="btn {{mmm}}" (click)="selectPerson(person.id)">select</button>
Each user has their own button and when I click on a button, it should change the color of only that specific button.
In my person.component.ts
persons: IPersons[];
mmm: any = 'btn-success';
selectPerson(id: number) {
this.persons.forEach(element => {
if (element.id === id) {
element.clicked = true;
this.mmm = 'btn-danger';
} else {
element.clicked = false;
this.mmm = 'btn-success';
}
});
}
In my person.model.ts
export interface IPerson{
id?: number;
name?: string;
surname?: string;
age?: number;
self_number?: string;
parent_number?: string;
home_number?: string;
photoContentType?: string;
photo?: any;
clicked?: boolean;}
export class Person implements IPerson{
constructor(
public id?: number,
public name?: string,
public surname?: string,
public age?: number,
public self_number?: string,
public parent_number?: string,
public home_number?: string,
public photoContentType?: string,
public photo?: any
) {}}