I have been using mat-slide-toggle to update the state of a field in my Firestore database. However, I have noticed a strange flickering behavior in other elements when I press it.
I have read that using trackBy can prevent these types of issues. I tried implementing it, but the problem persists.
https://i.sstatic.net/Nc3fC.gif
lista-items.component.html
<app-card-item-admin *ngFor="let item of group.items; let i = index; trackBy: trackByPublicado" [idNegocio]="idNegocio" [item]="item"></app-card-item-admin>
lista-items.components.ts
actualizarPublicado(idItem, publicado) { this.afs.collection('negocios').doc(this.idNegocio).collection('items').doc(idItem).update({publicado});
}
trackByPublicado(item) {
return item.publicado;
}
card-item-admin.component.html
<div class="position-relative bg-white rounded-3 border">
<div class="d-flex justify-content-between">
<div class="me-2">
<img class="imageItemAdmin rounded-start" [src]="item.image">
</div>
<div class="w-100">
<p class="nombreItem mb-0 mt-1 lh-1">{{item.nombre}}</p>
<p class="descripcionItem mb-0">{{item.descripcion | slice:0:32}}...</p>
<span class="me-2" [ngClass]=" !item.precioDescuento ? 'text-decoration-line-through small text-muted' : 'precioItem' " *ngIf="item.precioDescuento">S/. {{item.precioDescuento}}</span>
<span [ngClass]=" item.precioDescuento ? 'text-decoration-line-through small text-muted' : 'precioItem' " >S/. {{item.precio}}</span>
</div>
<div class="pe-2 pt-2">
<mat-slide-toggle color="primary" #toggle [ngModel]="item.publicado" (ngModelChange)="actualizarPublicado(item.id, $event)">
</mat-slide-toggle>
</div>
</div>
</div>