[SOLVED] trackBy in ngfor not worker Angular


I am working with mat-slide-toggle to update the state of a field in my database (Firestore). The problem is that I see that it has a strange behavior in the other elements when pressing it (a flicker).

I’ve been reading that using trackBy prevents these types of behavior. I used it but the error stays.

enter image description here


<app-card-item-admin *ngFor="let item of group.items; let i = index; trackBy: trackByPublicado" [idNegocio]="idNegocio" [item]="item"></app-card-item-admin>


actualizarPublicado(idItem, publicado) { this.afs.collection('negocios').doc(this.idNegocio).collection('items').doc(idItem).update({publicado});

trackByPublicado(item) {
      return item.publicado;


<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 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 class="pe-2 pt-2">
      <mat-slide-toggle color="primary" #toggle [ngModel]="item.publicado" (ngModelChange)="actualizarPublicado(item.id, $event)">



I think, the reason is the way you use ngModel and ngModelChange, try to switch to just using checked property and change event for mat-slide-toggle like below

actualizarPublicado(idItem, change: MatSlideToggleChange) { 
      publicado: change.checked

  (change)="actualizarPublicado(item.id, $event)">

Answered By – Slawa Eremin

Answer Checked By – Robin (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *