Entertainment web app w/ (Angular + Node + Typescript) 👨‍💻

Community feedback

• 

  Louisan TCHITOULA•170

  @LTOssianPosted about 1 year ago

  Incredible work Adriano ! This is a very impressive solution, especially regarding the handmade authentication.

  One observation

  I noticed in your home page that on within your ngFor directive you are not using a trackBy function to allow Angular to track each item. Thus when clicking on the bookmark button, every movie card is reloaded !

  The trackBy function is used to improve performance by tracking which unique item has changed instead of refreshing all of the items from the loop.

  If you have experience with react, it does the same improvement as giving a unique key to a returned JSX from a map().

  How to fix this ?

  Inside item-list.component.html

  Currently you have something like this :

  <li *ngFor="let item of items"> {item.name} </li>

  You can apply the trackBy like so :

  <li *ngFor="let item of items; trackBy: trackByItem">{item.name}</li>

  trackByItem is a method that has to be declared within your component, and takes in the loop index and the item value associated, then returns a unique value. Here is an example :

  Inside item-list.component.ts

  /**
  * returns a unique ID for Angular 
  * to compare accurately what item has changed
  */
  public trackByItem(index: number, item: Item) {
     return item.id
  }
  

  You can implement this for every ngFor that iterates through values that are dynamic and can be changed by some event action (i.e: when showBookmarkedImg change from false to true :) ) and it is a good practice overall. Hope this helps ! Here is the official documentation on this

  Marked as helpful

  0