Best practice – using the TrackBy property

After the *ngIf directive, the ngFor directive will probably be the directive that you will use the most in your Angular projects. Although simple, this directive can hide a performance and perception problem in the frontend that will occur for your user.

To demonstrate this, let’s add a new list button, simulating a list update coming from the backend.

In the diary.component.ts file, add the following method:

 newList() {
   this.exerciseList = [
     { id: '1', date: new Date(), exercise: 'Deadlift', reps: 15, sets: 3 },
     { id: '2', date: new Date(), exercise: 'Squat', reps: 15, sets: 3 },
     { id: '3', date: new Date(), exercise: 'Barbell row', reps: 15, sets: 3 },
     { id: '4', date: new Date(), exercise: 'Leg Press&apos...