0
167
VistasCómo seleccionar solo un div a la vez en angular 10
Tengo que crear un filtro de ordenación en mi aplicación donde puedo seleccionar solo una opción a la vez para ordenar mis resultados. Mi interfaz de usuario es tal que no puedo usar casillas de verificación. Es una lista simple. Así que estoy creando la lista a través de div. ¿Alguien puede sugerir cómo implementar 
selección de ment y deselección de div en angular. Solo puedo seleccionar un div a la vez. Además, si he seleccionado alguna opción y ahora hago clic en la opción 2, entonces la opción 1 div debería ser deseleccionada y la opción 2 div debería ser seleccionada.
1 Respuestas
Responde la pregunta0
Una solución sería establecer el valor 'actual' cuando se hace clic en el div. Agregue una clase cuando el valor 'actual' coincida con el valor del artículo.
<div *ngFor="let item of items" (click)="onItemSelection(item) [class.current-selection]="item === currentValue"> {{ item }} </div>Maneje el evento en su archivo component.ts almacenando el nuevo valor:
currentValue: string; onItemSelection(newValue: string) { this.currentValue = newValue; }Luego actualice el aspecto del elemento actual en su archivo component.scss:
.current-selection { background-color: green; }