Entonces quiero agregar una función (clic) en tres botones. Cuando entro por primera vez en la página, el primer botón debe ser el que está seleccionado mientras que los otros dos no están seleccionados. Si hago clic en el botón que ya está seleccionado, permanece seleccionado, pero cuando hago clic en uno de los botones no seleccionados, el que hice clic se vuelve seleccionado y el previamente seleccionado se deselecciona. Aquí está el código que escribí hasta ahora:
HTML
<div role="button" (click)="[button1 = !button1, buttons()]"> <p>button</p> <button *ngIf="button1"> selected </button> <button *ngIf="!button1"> unselected </button> </div> <div role="button" (click)="[button2 = !button2, buttons()]"> <p>button</p> <button *ngIf="button2"> selected </button> <button *ngIf="!button2"> unselected </button> </div> <div role="button" (click)="[button3 = !button3, buttons()]"> <p>button</p> <button *ngIf="button3"> selected </button> <button *ngIf="!button3"> unselected </button> </div>TS
button1 = true button2 = false button3 = false constructor() { } ngOnInit(): void { } buttons(){ }HTML
<button [class.selected]="button === 'button1'" (click)="onClickButton('button1')">button 1</button> <button [class.selected]="button === 'button2'" (click)="onClickButton('button2')">button 2</button> <button [class.selected]="button === 'button3'" (click)="onClickButton('button3')">button 3</button>TS
button = 'button1' onClickButton(button: string) { this.button = button }CSS
button { background-color: black; color: white; } button.selected { background-color: white; color: black; }