# Angular Core

> Guía esencial de Angular 17+ (Standalone, Signals, Inject).

- Skill: `majiayu000/angular-core` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/angular-core`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/angular-core/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/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`.

```typescript
@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.

```typescript
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.

```typescript
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`.

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

## Referencia

- Generado con Context7 / Angular.dev