Angular Core

Angular Core (Modern Practices)

Esta skill documenta el estándar moderno de Angular (v17+), enfocándose en eliminar boilerplate y mejorar reactividad.

1. Standalone Components (Default)

Ya no usamos NgModules para cada cosa. Los componentes son standalone: true.

@Component({
  standalone: true,
  selector: "app-user-profile",
  imports: [CommonModule, UserAvatarComponent], // Importar dependencias directas
  template: `...`,
})
export class UserProfileComponent {}

2. Signals (State Management)

Reemplaza BehaviorSubject para estado local y derivado.

export class CounterComponent {
  // Estado Reactivo
  count = signal(0);

  // Estado Derivado (Computed)
  double = computed(() => this.count() * 2);

  increment() {
    this.count.update((n) => n + 1);
  }
}

3. Dependency Injection (inject)

Preferimos inject() sobre inyección en constructor para mayor flexibilidad y tipado.

export class UserParams {
  // Antes: constructor(private route: ActivatedRoute) {}
  private route = inject(ActivatedRoute);

  id = this.route.snapshot.params["id"];
}

4. Control Flow (Nuevo Web Syntax)

Adiós *ngIf, hola @if.

@if (isLoggedIn()) {
<user-dashboard />
} @else {
<login-page />
} @for (item of items(); track item.id) {
<item-card [data]="item" />
}

Referencia

• Generado con Context7 / Angular.dev