Sobes.tech
Middle

Angular task: write a ngFor template to display a list of fruits. Add conditional row coloring if the value is missing. Add trackBy.

sobes.tech AI

Answer from AI

html <ul> <li *ngFor="let fruit of fruits; trackBy: trackByFn" [style.color]="fruit ? 'black' : 'red'"> {{ fruit || 'Value is missing' }} </li> </ul>


```typescript
fruits = ['apple', null, 'banana', undefined, 'orange'];

trackByFn(index: number, item: string | null | undefined): number {
  return index; // or you can use a unique identifier if available
}

In this template:

  • *ngFor is used to iterate over the fruits array.
  • If the value is missing (null or undefined), the line is colored red and displays the text "Value is missing".
  • trackBy is added for rendering optimization, so Angular tracks elements by index.
Angular task: write a ngFor template to display a… - sobes.tech