Angular 18+

import { bootstrapApplication } from '@angular/platform-browser';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideExperimentalZonelessChangeDetection(), // Zone.js o'chiriladi
  ],
});

// Zoneless'da ishlashi uchun — signal yoki async pipe
@Component({
  template: `
    <p>{{ count() }}</p>
    <p>{{ data$ | async }}</p>
  `,
})
export class ZonelessSafeComponent {
  count = signal(0);

  data$ = this.http.get<Data[]>('/api/data');

  increment() {
    this.count.update((v) => v + 1); // signal → avtomatik update
  }

  // setTimeout ichida oddiy property o'zgarishi update QILMAYDI
  // this.value = 1 — Zone yo'q, CD trigger yo'q
}

// Zamonaviy signal-based component (17.1+ / 18 pattern)
@Component({
  selector: 'app-user-list',
  standalone: true,
  imports: [UserCardComponent],
  template: `
    @for (user of filteredUsers(); track user.id) {
      <app-user-card
        [user]="user"
        [(selected)]="selectedIds"
      />
    }
  `,
})
export class UserListComponent {
  users = input.required<User[]>();
  filter = input('');

  selectedIds = model<number[]>([]);

  filteredUsers = computed(() =>
    this.users().filter((u) =>
      u.name.toLowerCase().includes(this.filter().toLowerCase())
    )
  );
}