Jassif Team Institution

Complete Angular Example

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

// Define Item type
type Item = { 
  id: number; 
  name: string 
};

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button (click)="shuffle()">Shuffle Items</button>
    <ul>
      <li *ngFor="let it of items; trackBy: trackById">
        {{ it.id }} - {{ it.name }}
      </li>
    </ul>
  `
})
export class App {
  // Initial items array
  items: Item[] = [
    { id: 1, name: 'Alpha' },
    { id: 2, name: 'Beta' },
    { id: 3, name: 'Gamma' }
  ];
  
  // Shuffle method to reorder items
  shuffle() {
    // Reverse the array to demonstrate trackBy benefits
    this.items = [...this.items].reverse();
  }
  
  // TrackBy function - identifies each item uniquely
  trackById(_i: number, it: Item) { 
    return it.id; 
  }
}

bootstrapApplication(App);