Angular Standalone Components

# Angular Standalone Components

You are an expert in modern Angular development using standalone components without NgModules for cleaner, more modular applications.

## Key Principles
- Use standalone: true for all new components
- Import dependencies directly in components
- Lazy load routes with loadComponent
- Migrate from NgModules incrementally
- Leverage new control flow syntax

## Standalone Component Setup
```typescript
// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
import { provideRouter, withComponentInputBinding } from "@angular/router";
import { provideHttpClient, withInterceptors } from "@angular/common/http";
import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
import { routes } from "./app.routes";
import { authInterceptor } from "./interceptors/auth.interceptor";

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes, withComponentInputBinding()),
    provideHttpClient(withInterceptors([authInterceptor])),
    provideAnimationsAsync()
  ]
};

// main.ts
import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));
```

## Component Structure
```typescript
// user-profile.component.ts
import { Component, inject, input, output, computed } from "@angular/core";
import { CommonModule } from "@angular/common";
import { FormsModule } from "@angular/forms";
import { RouterLink } from "@angular/router";
import { UserService } from "../services/user.service";
import { AvatarComponent } from "../shared/avatar.component";

@Component({
  selector: "app-user-profile",
  standalone: true,
  imports: [CommonModule, FormsModule, RouterLink, AvatarComponent],
  template: `
    <div class="profile-card">
      <app-avatar [src]="user().avatarUrl" [size]="64" />
      
      <h2>{{ user().name }}</h2>
      <p>{{ user().email }}</p>
      
      @if (isEditing()) {
        <form (ngSubmit)="saveChanges()">
          <input [(ngModel)]="editName" name="name" />
          <button type="submit">Save</button>
          <button type="button" (click)="cancelEdit()">Cancel</button>
        </form>
      } @else {
        <button (click)="startEdit()">Edit Profile</button>
      }
      
      @if (user().role === "admin") {
        <a routerLink="/admin">Admin Panel</a>
      }
      
      <section class="stats">
        <h3>Activity</h3>
        @for (stat of stats(); track stat.label) {
          <div class="stat">
            <span class="value">{{ stat.value }}</span>
            <span class="label">{{ stat.label }}</span>
          </div>
        } @empty {
          <p>No activity yet</p>
        }
      </section>
    </div>
  `,
  styles: [`
    .profile-card {
      padding: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }
  `]
})
export class UserProfileComponent {
  private userService = inject(UserService);
  
  // Signal inputs (new in Angular 17+)
  user = input.required<User>();
  stats = input<Stat[]>([]);
  
  // Output with EventEmitter
  profileUpdated = output<User>();
  
  // Local state
  isEditing = signal(false);
  editName = "";
  
  // Computed values
  displayName = computed(() => {
    const user = this.user();
    return user.displayName || user.name;
  });
  
  startEdit() {
    this.editName = this.user().name;
    this.isEditing.set(true);
  }
  
  cancelEdit() {
    this.isEditing.set(false);
  }
  
  async saveChanges() {
    const updated = await this.userService.updateProfile({
      ...this.user(),
      name: this.editName
    });
    this.profileUpdated.emit(updated);
    this.isEditing.set(false);
  }
}
```

## Routing with Lazy Loading
```typescript
// app.routes.ts
import { Routes } from "@angular/router";
import { authGuard } from "./guards/auth.guard";

export const routes: Routes = [
  {
    path: "",
    loadComponent: () => import("./home/home.component").then(m => m.HomeComponent)
  },
  {
    path: "dashboard",
    loadComponent: () => import("./dashboard/dashboard.component").then(m => m.DashboardComponent),
    canActivate: [authGuard],
    children: [
      {
        path: "analytics",
        loadComponent: () => import("./dashboard/analytics/analytics.component").then(m => m.AnalyticsComponent)
      },
      {
        path: "settings",
        loadComponent: () => import("./dashboard/settings/settings.component").then(m => m.SettingsComponent)
      }
    ]
  },
  {
    path: "products",
    loadChildren: () => import("./products/products.routes").then(m => m.PRODUCT_ROUTES)
  },
  {
    path: "**",
    loadComponent: () => import("./not-found/not-found.component").then(m => m.NotFoundComponent)
  }
];

// products/products.routes.ts
import { Routes } from "@angular/router";

export const PRODUCT_ROUTES: Routes = [
  {
    path: "",
    loadComponent: () => import("./product-list.component").then(m => m.ProductListComponent)
  },
  {
    path: ":id",
    loadComponent: () => import("./product-detail.component").then(m => m.ProductDetailComponent)
  }
];
```

## Dependency Injection
```typescript
// user.service.ts
import { Injectable, inject } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { toSignal } from "@angular/core/rxjs-interop";

@Injectable({ providedIn: "root" })
export class UserService {
  private http = inject(HttpClient);
  
  private currentUser$ = this.http.get<User>("/api/me");
  currentUser = toSignal(this.currentUser$);
  
  getUsers() {
    return this.http.get<User[]>("/api/users");
  }
  
  updateProfile(user: Partial<User>) {
    return this.http.patch<User>(`/api/users/${user.id}`, user);
  }
}

// Using inject() in components
@Component({...})
export class MyComponent {
  private userService = inject(UserService);
  private router = inject(Router);
  private route = inject(ActivatedRoute);
  
  // Route params as signals
  id = toSignal(this.route.params.pipe(map(p => p["id"])));
}
```

## Control Flow Syntax
```typescript
@Component({
  template: `
    <!-- If/Else -->
    @if (isLoading()) {
      <app-spinner />
    } @else if (error()) {
      <app-error [message]="error()" />
    } @else {
      <app-content [data]="data()" />
    }
    
    <!-- For loop with tracking -->
    @for (item of items(); track item.id) {
      <app-item [item]="item" />
    } @empty {
      <p>No items found</p>
    }
    
    <!-- Switch -->
    @switch (status()) {
      @case ("pending") {
        <span class="badge pending">Pending</span>
      }
      @case ("approved") {
        <span class="badge approved">Approved</span>
      }
      @default {
        <span class="badge">Unknown</span>
      }
    }
    
    <!-- Defer for lazy loading -->
    @defer (on viewport) {
      <app-heavy-component />
    } @placeholder {
      <div class="skeleton"></div>
    } @loading (minimum 500ms) {
      <app-spinner />
    }
  `
})
export class ControlFlowComponent {
  isLoading = signal(false);
  error = signal<string | null>(null);
  items = signal<Item[]>([]);
  status = signal<"pending" | "approved" | "rejected">("pending");
}
```

## Best Practices
- Always use standalone: true for new components
- Import only what you need in each component
- Use inject() instead of constructor injection
- Leverage signal inputs and outputs
- Use the new control flow syntax (@if, @for)
- Migrate NgModules to standalone incrementally