En mi aplicación angular, tengo algunos íconos y mi requisito es agregar los números debajo de los íconos, por lo que agregué la clase dentro de la etiqueta de intervalo para incrementar los números. Pero los números deben agregarse según los íconos.

.componente.html

 <div class="toggleButton col-md-4" > <label class="rating-switch" id="toggleSwitch"> <input class="rating-checkbox" type="checkbox" [checked]="toggleState" (change)="onToggleClicked($event)" > <div class="slide round" > </div> </label> <span class="no-rating-switch" >No Rating</span> </div> <div class="container"> <span class="icon-number" ></span> <i (click)="onIconClick(icon)" class="iconStyle" [ngClass]="icon.class" [style.color]="icon.active === true ? '#FF0000' : '#ffffff'" *ngFor="let icon of iconsArr"> </i> </div>

En i tag hay un total de 10 íconos y los que he agregado en el archivo .ts y he agregado estilos a la clase iconStyle, y también para la clase de número de icono en la etiqueta span anterior que he agregado para agregar el incremento de números en css.

.componente.css

 .icon-number{ position: relative; left: 22px; top: 20px; } .icon-number:after{ content: counter(number); counter-increment: number; }

.componente.ts

 toggleState = true; iconsArr = [ { id: 1, class: "icon-1",active: false }, { id: 2, class: "icon-2",active: false }, { id: 3, class: "icon-3" ,active: false}, { id: 4, class: "icon-4" ,active: false}, { id: 5, class: "icon-5" ,active: false}, ] onIconClick(icon: any) { let iconToEdit = this.iconsArr.find(ico => ico.id === icon.id); if (iconToEdit && !iconToEdit.active) { this.iconsArr.forEach(i => i.active = false); iconToEdit.active = !iconToEdit.active; this.markToggleAsActive(); } else { this.iconsArr.forEach(i => i.active = false); } } onToggleClicked(event: any) { this.toggleState = event.target.checked; this.markIconsAsInactive(); } markIconsAsInactive() { if (this.toggleState) { this.iconsArr.forEach(icon => icon.active = false); } } markToggleAsActive() { this.toggleState = !this.iconsArr.find(icon => icon.active); }

En el código anterior, tengo que agregar los números según la cantidad de íconos y también cuando hacemos clic en los íconos, el número debajo de los íconos debe estar en negrita.

Puede alguien ayudarme con esto