Estoy comenzando con angular y mi pregunta es bastante simple. (Estoy seguro de que hay una respuesta en Internet, pero no sé cómo formular mi pregunta simplemente)

aquí está mi componente

Solo quiero cambiar el color del botón en el lado derecho de esta manera y cuando hago clic en otro, el primero vuelve a la normalidad y cambia de color .

Aquí está el código de mi componente:

 <div class="container-scrap"> <div class="legend"> <div class="color-sample" [ngStyle]="{'background-color': scrap.color}"></div> <p>{{scrap.scrapName}}</p> </div> <div> <button (click)="selectType($event, scrap.color)" class="legend-button" [disabled]="!availableInput"></button> </div>

Estoy llamando a mi componente de esta manera:

 <app-scrap-list *ngFor="let scrap of scrapList" [scrap]="scrap" [availableInput]="availableInput"></app-scrap-list>

Actualmente estoy usando solo algunas instrucciones simples de javascript y el código de mi selectType($event, scrap.color) es:

 selectType({target} : any, color : string): void { this.scrapListService.setSelected(this.scrap.id); //(document.querySelectorAll(".legend-button") as HTMLCollectionOf<HTMLElement>).forEach(btn => btn.style.backgroundColor = "white") const legendButton = Array.from( document.getElementsByClassName('legend-button') as HTMLCollectionOf<HTMLElement> ); legendButton.forEach(btn => { btn.style.backgroundColor = 'whitesmoke'; btn.style.borderColor = 'grey'; }); target.style.backgroundColor = color; target.style.borderColor = color; target.style.backgroundImage = "url(../../assets/ajout_rectangle_active.png)"; }

¿Hay una manera mejor y más sencilla de hacerlo usando propiedades angulares como ng-class, ng-style u otras?