// src/app/app.config.ts — the new root configuration file

import {
  ApplicationConfig,
  provideZonelessChangeDetection,
} from '@angular/core';
import {
  provideRouter,
  withComponentInputBinding,
  withViewTransitions,
} from '@angular/router';
import {
  provideHttpClient,
  withFetch,
  withInterceptors,
} from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    // Router — withComponentInputBinding passes route params as @Input()
    provideRouter(
      routes,
      withComponentInputBinding(), // NEW in Angular 16, standard in 20
      withViewTransitions(), // CSS View Transitions API
    ),

    // HTTP — withFetch uses the native Fetch API instead of XHR
    provideHttpClient(
      withFetch(), // NEW in Angular 17, standard in 20
      withInterceptors([]),
    ),

    // Animations — loaded lazily so they don't block initial render
    provideAnimationsAsync(),

    // Zoneless change detection — the Angular 20 default for new projects
    // This replaces Zone.js entirely — signals drive all updates
    provideZonelessChangeDetection(),
  ],
};

Signal<T> = { value: T } + change notification

// BEFORE Angular 17 — decorator-based inputs
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({ selector: 'app-product-card' })
export class ProductCardComponent implements OnChanges {
  @Input({ required: true }) productId!: string;
  @Input() price: number = 0;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['productId']) {
      // React to productId change
      this.loadProduct(changes['productId'].currentValue);
    }
  }
}

// AFTER Angular 20 — signal-based inputs
import { Component, input, computed } from '@angular/core';

@Component({
  selector: 'app-product-card',
  standalone: true,
  template: `
    <div class="card">
      <h3>{{ productId() }}</h3>
      <p>Price: {{ formattedPrice() }}</p>

      <!-- Route param injected as signal automatically (withComponentInputBinding) -->
    </div>
  `,
})
export class ProductCardComponent {
  // input() creates a required signal input — no @Input decorator
  productId = input.required<string>();

  // input() with default creates optional signal input
  price = input<number>(0);

  // computed() reacts to input changes automatically
  formattedPrice = computed(() =>
    new Intl.NumberFormat('en-IN', {
      style: 'currency',
      currency: 'INR',
    }).format(this.price()),
  );

  // No lifecycle hook needed — computed() reacts automatically
}

// BEFORE — EventEmitter-based output
import { Component, Output, EventEmitter } from '@angular/core';

@Component({ selector: 'app-search' })
export class SearchComponent {
  @Output() searched = new EventEmitter<string>();

  onSearch(query: string): void {
    this.searched.emit(query);
  }
}

// AFTER Angular 20 — output()
import { Component, output } from '@angular/core';

@Component({
  selector: 'app-search',
  standalone: true,
  template: `
    <input
      type="text"
      #searchInput
      (keyup.enter)="onSearch(searchInput.value)"
      placeholder="Search products..."
    />
  `,
})
export class SearchComponent {
  // output() creates a typed event emitter
  searched = output<string>();

  onSearch(query: string): void {
    // emit() works exactly like EventEmitter.emit()
    this.searched.emit(query);
  }
}

// Angular 20 — model() creates a two-way binding signal
import { Component, model } from '@angular/core';

@Component({
  selector: 'app-quantity-picker',
  standalone: true,
  template: `
    <div class="qty-picker">
      <button (click)="decrement()" [disabled]="value() <= 1">−</button>
      <span>{{ value() }}</span>
      <button (click)="increment()" [disabled]="value() >= max()">+</button>
    </div>
  `,
})
export class QuantityPickerComponent {
  // model() creates a signal that supports two-way binding
  // Parent binds with [(value)]="parentSignal"
  value = model<number>(1);
  max = input<number>(99);

  increment(): void {
    this.value.update((v) => v + 1);
  }

  decrement(): void {
    this.value.update((v) => v - 1);
  }
}

// Usage in parent:
// <app-quantity-picker [(value)]="cartQuantity" [max]="product.stock" />

// A signal that derives from another but can also be set independently
import { Component, signal, linkedSignal } from '@angular/core';

@Component({
  selector: 'app-product-filter',
  standalone: true,
  template: `
    <select (change)="onCategoryChange($event)">
      @for (cat of categories(); track cat) {
        <option [value]="cat">{{ cat }}</option>
      }
    </select>

    <!-- Subcategory resets when category changes, but can also be set manually -->
    <select (change)="subcategory.set($any($event.target).value)">
      @for (sub of subcategories(); track sub) {
        <option [value]="sub">{{ sub }}</option>
      }
    </select>
  `,
})
export class ProductFilterComponent {
  categories = signal(['Clothing', 'Footwear', 'Accessories']);

  // selectedCategory is a writable signal
  selectedCategory = signal('Clothing');

  // subcategory DERIVES from selectedCategory (resets when category changes)
  // but can ALSO be written to independently (unlike computed())
  subcategory = linkedSignal(() => {
    // This runs whenever selectedCategory changes
    // Returns the default/reset value
    const cat = this.selectedCategory();
    return cat === 'Clothing'
      ? 'T-Shirts'
      : cat === 'Footwear'
        ? 'Sneakers'
        : 'Watches';
  });

  subcategories = signal(['T-Shirts', 'Jeans', 'Hoodies']);

  onCategoryChange(event: Event): void {
    this.selectedCategory.set((event.target as HTMLSelectElement).value);
    // subcategory automatically resets via linkedSignal
  }
}

import { resource, signal } from '@angular/core';

// Full resource() API
const userResource = resource<User, { id: string }>({
  // request(): returns the "request" parameters
  // Re-runs loader whenever request() returns a different value
  request: () => ({ id: this.userId() }),

  // loader(): performs the async operation
  // Receives { request, abortSignal } — use abortSignal to cancel fetch
  loader: async ({ request, abortSignal }) => {
    const response = await fetch(`/api/users/${request.id}`, {
      signal: abortSignal,
    });
    if (!response.ok) throw new Error('Failed to load user');
    return response.json() as Promise<User>;
  },
});

// Signals available on the resource:
userResource.value(); // User | undefined — the loaded data
userResource.isLoading(); // boolean — is a request in flight?
userResource.error(); // unknown — the last error, if any
userResource.status(); // 'idle' | 'loading' | 'loaded' | 'error' | 'refreshing'

// Methods on the resource:
userResource.reload(); // re-run the loader with the same request
userResource.set(user); // manually set the value (for optimistic updates)
userResource.update(fn); // update the value with a function (for optimistic updates)

import { rxResource } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';

@Component({ ... })
export class ProductListComponent {
  private http = inject(HttpClient);

  category = input<string>('all');

  productsResource = rxResource({
    request: () => this.category(),

    // loader returns an Observable instead of a Promise
    loader: ({ request: category }) => {
      const params = category === 'all' ? '' : `?category=${category}`;
      return this.http.get<Product[]>(`/api/products${params}`);
    },
  });
}

// BEFORE — structural directive
@Component({
  template: `
    <div *ngIf="user; else noUser">
      Welcome, {{ user.name }}
    </div>
    <ng-template #noUser>
      <a routerLink="/login">Sign in</a>
    </ng-template>
  `
})

// AFTER Angular 20 — built-in @if
@Component({
  template: `
    @if (user()) {
      <div>Welcome, {{ user().name }}</div>
    } @else if (isLoading()) {
      <div class="spinner">Loading...</div>
    } @else {
      <a routerLink="/login">Sign in</a>
    }
  `
})

// BEFORE — *ngFor with optional trackBy
@Component({
  template: `
    <div *ngFor="let product of products; trackBy: trackById; let i = index">
      {{ i + 1 }}. {{ product.name }}
    </div>
    <div *ngIf="products.length === 0">No products</div>
  `
})
class OldComponent {
  trackById = (index: number, item: Product) => item.id;
}

// AFTER Angular 20 — @for with mandatory track and built-in @empty
@Component({
  template: `
    @for (product of products(); track product.id) {
      <div class="product-item">
        {{ $index + 1 }}. {{ product.name }}
        @if ($first) { <span class="badge">New!</span> }
        @if ($last) { <hr /> }
      </div>
    } @empty {
      <div class="empty-state">No products found</div>
    }
  `
})

@for (item of items(); track item.id) {
  // Built-in context variables — no more 'let i = index' syntax
  {{ $index }}    // 0-based index
  {{ $first }}    // true for the first item
  {{ $last }}     // true for the last item
  {{ $even }}     // true for even-indexed items
  {{ $odd }}      // true for odd-indexed items
  {{ $count }}    // total number of items in the collection
}

// BEFORE — ngSwitch
@Component({
  template: `
    <div [ngSwitch]="order.status">
      <span *ngSwitchCase="'pending'">Awaiting confirmation</span>
      <span *ngSwitchCase="'shipped'">On the way</span>
      <span *ngSwitchCase="'delivered'">Delivered</span>
      <span *ngSwitchDefault>Unknown status</span>
    </div>
  `
})

// AFTER Angular 20 — @switch
@Component({
  template: `
    @switch (order().status) {
      @case ('pending') {
        <span class="status status--pending">Awaiting confirmation</span>
      }
      @case ('processing') {
        <span class="status status--processing">Being prepared</span>
      }
      @case ('shipped') {
        <span class="status status--shipped">On the way</span>
      }
      @case ('delivered') {
        <span class="status status--delivered">✓ Delivered</span>
      }
      @default {
        <span class="status">{{ order().status }}</span>
      }
    }
  `
})

@Component({
  selector: 'app-product-page',
  standalone: true,
  template: `
    <!-- Always renders immediately -->
    <app-product-hero [product]="product()" />

    <!-- Defers rendering until user scrolls to this section -->
    @defer (on viewport) {
      <app-product-reviews [productId]="product().id" />
    } @loading (minimum 300ms) {
      <div class="reviews-skeleton">Loading reviews...</div>
    } @error {
      <p>Reviews unavailable</p>
    } @placeholder {
      <!-- Shows before the defer trigger fires -->
      <div class="reviews-placeholder">Reviews will load as you scroll</div>
    }

    <!-- Defers until user hovers the related products section -->
    @defer (on hover(relatedSection)) {
      <app-related-products [categoryId]="product().category" />
    } @placeholder {
      <div #relatedSection class="related-placeholder">Related Products</div>
    }

    <!-- Defers for 2 seconds after page load (improves initial LCP) -->
    @defer (on timer(2000)) {
      <app-recently-viewed />
    }

    <!-- Defers based on a signal or expression -->
    @defer (when cartVisible()) {
      <app-mini-cart />
    }

    <!-- Prefetches the component on idle, renders when clicked -->
    @defer (on interaction(triggerEl); prefetch on idle) {
      <app-size-guide />
    } @placeholder {
      <button #triggerEl>View Size Guide</button>
    }
  `,
})
export class ProductPageComponent {
  product = input.required<Product>();
  cartVisible = signal(false);
}

// Angular 20 — standalone is the default, you don't even need to write it
// But it's good practice to be explicit in shared libraries

@Component({
  selector: 'app-product-card',
  // standalone: true is now the default — you may omit it
  imports: [
    // Import directly — no NgModule needed
    RouterLink,
    CurrencyPipe,
    DatePipe,
    // Other standalone components
    ProductRatingComponent,
    WishlistButtonComponent,
  ],
  templateUrl: './product-card.component.html',
  styleUrls: ['./product-card.component.scss'],
})
export class ProductCardComponent {
  product = input.required<Product>();
  addedToCart = output<Product>();
}

// Angular 20 — import utilities directly, no shared module
import { Component } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { AsyncPipe, CurrencyPipe, DatePipe, DecimalPipe, TitleCasePipe } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

@Component({
  imports: [
    // Forms
    ReactiveFormsModule,

    // Router
    RouterLink,
    RouterLinkActive,

    // Common pipes — import only what you need
    CurrencyPipe,
    DatePipe,
    DecimalPipe,
    TitleCasePipe,
    AsyncPipe,     // still needed when mixing Observables with templates
  ],
})

// Smooth page transitions using the CSS View Transitions API
provideRouter(
  routes,
  withViewTransitions({
    // Optional: skip transitions for certain navigations
    skipInitialTransition: true,
    // onViewTransitionCreated: hook to add custom animation logic
  }),
);

// styles.scss — animate the transition
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Angular applies view-transition-name automatically
:root {
  --transition-duration: 250ms;
}

::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: fade-in var(--transition-duration) ease-out;
}

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { Store } from '@ngrx/store';
import { selectCartItemCount } from './store/cart/cart.selectors';

@Component({
  template: `
    <!-- Read as signal — no async pipe -->
    <span class="badge">{{ cartCount() }}</span>
  `,
})
export class HeaderComponent {
  private store = inject(Store);

  // toSignal() converts Observable → Signal
  // The Angular way to use NgRx selectors in Angular 20 templates
  cartCount = toSignal(this.store.select(selectCartItemCount), {
    initialValue: 0, // value before the Observable emits
  });
}

import { toObservable } from '@angular/core/rxjs-interop';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs';

@Component({})
export class SearchComponent {
  searchQuery = signal('');

  // Convert signal to Observable for debounce/switchMap behavior
  private searchQuery$ = toObservable(this.searchQuery);

  searchResults = toSignal(
    this.searchQuery$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((query) =>
        query.length > 2 ? this.productService.search(query) : of([]),
      ),
    ),
    { initialValue: [] },
  );
}

Angular 14 and earlier:
  Default     → Check entire component tree on every event
  OnPush      → Check only when @Input changes or async pipe emits

Angular 20:
  Zoneless    → Check only when a Signal changes (fine-grained)
  OnPush      → Still supported for hybrid migration
  Signals     → Recommended: components auto-update when signals change

// Angular 14 — Default CD: checks everything on every event
// This component re-renders whenever ANY event happens in the app

@Component({
  selector: 'app-product-price',
  template: `<span>{{ formatPrice(price) }}</span>`,
})
export class ProductPriceComponent {
  @Input() price: number = 0;

  formatPrice(price: number): string {
    return `₹${price.toLocaleString('en-IN')}`;
  }
  // formatPrice() is called on EVERY change detection cycle
  // Even when another component's button is clicked
}

// Angular 17-19 — OnPush: only checks when @Input changes
// Better performance but still requires careful management

import { Component, ChangeDetectionStrategy, Input } from '@angular/core';

@Component({
  selector: 'app-product-price',
  changeDetection: ChangeDetectionStrategy.OnPush, // explicit opt-in
  template: `<span>{{ price | currency: 'INR' }}</span>`,
})
export class ProductPriceComponent {
  @Input() price: number = 0;
  // Now only re-renders when price input changes (new reference)
}

// Angular 20 — Signal-driven: only the specific component that reads
// a changed signal re-renders. Fine-grained, automatic.

import {
  Component,
  signal,
  computed,
  ChangeDetectionStrategy,
} from '@angular/core';

@Component({
  selector: 'app-product-price',
  standalone: true,
  // With zoneless, OnPush is effectively always on
  // You can still add it explicitly for clarity
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<span>{{ formattedPrice() }}</span>`,
})
export class ProductPriceComponent {
  // Signal input — component re-renders only when price() changes
  price = input<number>(0);

  formattedPrice = computed(() =>
    new Intl.NumberFormat('en-IN', {
      style: 'currency',
      currency: 'INR',
    }).format(this.price()),
  );
  // computed() is memoized — only recalculates when price() changes
  // formattedPrice() is NOT recalculated on unrelated changes elsewhere
}

// BEFORE — constructor injection
@Injectable({ providedIn: 'root' })
export class ProductService {
  constructor(
    private http: HttpClient,
    private router: Router,
    private auth: AuthService,
  ) {}
}

// AFTER Angular 20 — inject() in class fields
@Injectable({ providedIn: 'root' })
export class ProductService {
  private http = inject(HttpClient);
  private router = inject(Router);
  private auth = inject(AuthService);

  // No constructor needed at all
}

// inject() works in standalone functions and guards
export const authGuard: CanActivateFn = () => {
  // inject() works here because guards run in injection context
  const auth = inject(AuthService);
  return auth.isAuthenticated();
};

// inject() in route resolvers
export const productResolver: ResolveFn<Product> = (route) => {
  const service = inject(ProductService);
  return service.getBySlug(route.paramMap.get('slug')!);
};

// Angular 20 — create scoped injectors programmatically
import { createEnvironmentInjector, EnvironmentInjector } from '@angular/core';

const scopedInjector = createEnvironmentInjector(
  [
    { provide: ProductService, useClass: CachedProductService },
    { provide: API_URL, useValue: 'https://api.example.com' },
  ],
  parentInjector,
);

@Component({
  template: `
    <!-- The server renders a placeholder -->
    <!-- The client hydrates only when the user scrolls to it -->
    <!-- JS for the component is only loaded when needed -->
    @defer (hydrate on viewport) {
      <app-product-reviews [productId]="product().id" />
    } @placeholder {
      <div class="reviews-placeholder" aria-hidden="true">
        <!-- Static placeholder visible on SSR and before hydration -->
        <h2>Customer Reviews</h2>
        <p>Loading reviews...</p>
      </div>
    }
  `
})

import { Component, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({})
export class AnalyticsComponent {
  private platformId = inject(PLATFORM_ID);

  ngOnInit(): void {
    // Only run browser-specific code on the client
    if (isPlatformBrowser(this.platformId)) {
      // Safe to use localStorage, window, document
      const userId = localStorage.getItem('user_id');
      this.trackPageView(userId);
    }
  }
}