Angular Essentials

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { UserAvatarComponent } from './user-avatar.component';

@Component({
  selector: 'app-user-card',
  standalone: true,
  // Import dependencies directly into the component
  imports: [CommonModule, RouterModule, UserAvatarComponent],
  template: `
    <div class="card">
      <!-- *ngIf is imported via CommonModule -->
      <app-user-avatar *ngIf="user" [src]="user.avatar"></app-user-avatar>
      <h3>{{ user?.name }}</h3>
      <a [routerLink]="['/users', user?.id]">View Profile</a>
    </div>
  `,
  styles: [`.card { padding: 1rem; border: 1px solid #ccc; }`]
})
export class UserCardComponent {
  @Input() user: any;
}

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <!-- Read signal value with parentheses () -->
    <h2>Count: {{ count() }}</h2>
    <h3>Double: {{ doubleCount() }}</h3>
    <button (click)="increment()">Increment</button>
    <button (click)="reset()">Reset</button>
  `
})
export class CounterComponent {
  // 1. Writable Signal
  count = signal(0);

  // 2. Computed Signal (read-only, memoized)
  doubleCount = computed(() => this.count() * 2);

  constructor() {
    // 3. Effect: runs whenever a read signal changes
    effect(() => {
      console.log(`The count is now: ${this.count()}`);
    });
  }

  increment() {
    // Update signal value
    this.count.update(c => c + 1);
  }

  reset() {
    // Set signal directly
    this.count.set(0);
  }
}

<!-- @if / @else -->
@if (isLoggedIn()) {
  <user-profile [user]="user()" />
} @else {
  <login-form />
}

<!-- @for with mandatory tracking -->
<ul>
  @for (item of items(); track item.id) {
    <li>{{ item.name }}</li>
  } @empty {
    <li>No items found.</li>
  }
</ul>

<!-- @switch -->
@switch (status()) {
  @case ('loading') {
    <spinner />
  }
  @case ('success') {
    <success-message />
  }
  @default {
    <error-message />
  }
}

import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root' // Singleton across the app
})
export class DataService {
  // Modern DI using inject()
  private http = inject(HttpClient);

  getUsers() {
    return this.http.get<User[]>('/api/users');
  }
}

// Usage in component
export class UserList {
  private dataService = inject(DataService);
  users$ = this.dataService.getUsers();
}

import { Component, inject } from '@angular/core';
import { FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { debounceTime, distinctUntilChanged, switchMap, catchError, of } from 'rxjs';

export class SearchComponent {
  searchControl = new FormControl('');
  private http = inject(HttpClient);

  // RxJS pipeline
  results$ = this.searchControl.valueChanges.pipe(
    debounceTime(300),          // wait 300ms after last keystroke
    distinctUntilChanged(),     // only emit if value is different
    switchMap(term =>           // cancel previous pending request if new one starts
      this.http.get(`/api/search?q=${term}`).pipe(
        catchError(() => of([])) // handle errors gracefully
      )
    )
  );
}

<!-- The chart component will only be loaded when the user scrolls it into view -->
@defer (on viewport) {
  <heavy-chart-component [data]="chartData" />
} @placeholder {
  <div>Chart will load when you scroll here...</div>
} @loading (minimum 1s) {
  <spinner />
} @error {
  <p>Failed to load chart.</p>
}

<!-- Load immediately when a signal condition is met -->
@defer (when isReady()) {
  <dashboard />
}