Domina Angular v22: de fundamentos a producción
Componentes standalone, signals, control flow moderno, inyección de dependencias, routing y formularios reactivos. Editor Monaco con verificación estática—aprende practicando.
- Paso 1
Angular 1: ¿Qué es Angular? Tu primer componente standalone
Angular es un framework de aplicaciones completo y con criterio propio: componentes, inyección de de...
Comenzar lección - Paso 2
Angular 2: Templates e interpolación
El template de un componente es simplemente HTML con algunos superpoderes extra. El más simple es la...
Comenzar lección - Paso 3
Angular 3: Bindings de propiedad y atributo
Los corchetes vinculan una expresión a una propiedad del DOM: [src]="url" setea la propiedad real im...
Comenzar lección - Paso 4
Angular 4: Binding de eventos
Los paréntesis vinculan un evento del DOM a un handler: (click)="save()" ejecuta save() cada vez que...
Comenzar lección - Paso 5
Angular 5: Signals — Fundamentos de reactividad
Un signal es un pequeño contenedor reactivo para un valor. Creá uno con signal(valorInicial), leé su...
Comenzar lección - Paso 6
Angular 6: Renderizado condicional con @if
La sintaxis moderna de control de flujo de Angular vive directamente dentro del template: @if (condi...
Comenzar lección - Paso 7
Angular 7: Renderizado de listas con @for
@for (item of items(); track item.id) { ... } recorre una colección y renderiza su bloque una vez po...
Comenzar lección - Paso 8
Angular 8: Binding bidireccional
[(ngModel)]="value" combina un property binding y un event binding en una sola sintaxis "banana en u...
Comenzar lección - Paso 9
Angular 9: Signals calculados con computed()
computed(() => ...) crea un signal de solo lectura derivado de otros signals. Angular determina auto...
Comenzar lección - Paso 10
Angular 10: Bindings de clase y estilo
[class.active]="isActive()" activa o desactiva una única clase CSS según una expresión booleana — la...
Comenzar lección - Paso 11
Angular 11: Señales a fondo — objetos, arrays y actualizaciones inmutables
Las señales son superficiales: Angular solo detecta un cambio cuando se escribe una referencia de va...
Comenzar lección - Paso 12
Angular 12: computed() a fondo — encadenamiento y pureza
Un `computed()` puede leer otro `computed()` — Angular construye un grafo de dependencias y solo rec...
Comenzar lección - Paso 13
Angular 13: effect() — ejecutar efectos secundarios
`effect(() => {...})` ejecuta su callback una vez de inmediato, y luego lo vuelve a ejecutar automát...
Comenzar lección - Paso 14
Angular 14: limpieza de effect() y contexto de inyección
El callback de un efecto puede registrar una función de limpieza — mediante el parámetro `onCleanup`...
Comenzar lección - Paso 15
Angular 15: input() — entradas basadas en señales
`input<T>(valorPorDefecto)` declara una propiedad de componente respaldada por una señal que el PADR...
Comenzar lección - Paso 16
Angular 16: output() — salidas basadas en señales
`output<T>()` declara un evento que un componente puede emitir hacia arriba, reemplazando a `@Output...
Comenzar lección - Paso 17
Angular 17: model() — props de señal con enlace bidireccional
`model<T>(valorPorDefecto)` declara una prop respaldada por una señal que soporta enlace bidireccion...
Comenzar lección - Paso 18
Angular 18: hooks de ciclo de vida — ngOnInit, ngOnChanges, ngOnDestroy
Angular llama a métodos específicos de tu clase de componente en momentos específicos — implementa `...
Comenzar lección - Paso 19
Angular 19: legado vs. señales — mentalidad de migración
Te vas a encontrar con mucho código Angular existente escrito a la manera antigua: detección de camb...
Comenzar lección - Paso 20
Angular 20: untracked() y la planificación de efectos
Leer una señal dentro de `effect()` o `computed()` la registra automáticamente como dependencia. A v...
Comenzar lección - Paso 21
Angular 21: Fundamentos de componentes y composición
Toda UI de Angular es un árbol de componentes: clases pequeñas y autocontenidas, cada una con un sel...
Comenzar lección - Paso 22
Angular 22: Proyección de contenido con <ng-content>
Cualquier markup que un padre escriba ENTRE las etiquetas de apertura y cierre de un componente se p...
Comenzar lección - Paso 23
Angular 23: Proyección de contenido multi-slot
Un único slot por defecto `<ng-content />` funciona cuando un hijo solo necesita un bloque de markup...
Comenzar lección - Paso 24
Angular 24: @ContentChild
`<ng-content>` solo le permite al hijo MOSTRAR lo que el padre proyecta en él — no le da al hijo una...
Comenzar lección - Paso 25
Angular 25: @ViewChild
`@ContentChild` accede al contenido que el PADRE proyectó; `@ViewChild` accede a elementos y compone...
Comenzar lección - Paso 26
Angular 26: Inyección de dependencias e inject()
La inyección de dependencias de Angular significa que los componentes no construyen sus propias depe...
Comenzar lección - Paso 27
Angular 27: [ngClass] / [ngStyle] en profundidad y host bindings
Un solo binding `[class.x]="cond"` alterna una clase; `[ngClass]="{ a: condA, b: condB }"` alterna u...
Comenzar lección - Paso 28
Angular 28: Directivas de atributo personalizadas
Los componentes tienen una plantilla; las directivas no — en cambio, le agregan COMPORTAMIENTO a un ...
Comenzar lección - Paso 29
Angular 29: @switch para control de flujo multi-rama
Una cadena de `@if / @else if / @else if / @else` funciona para renderizado multi-rama, pero una vez...
Comenzar lección - Paso 30
Angular 30: Capstone de composición de componentes
Las ideas de este módulo se combinan: `<ng-content>` proyecta markup arbitrario dentro de un slot, `...
Comenzar lección - Paso 31
Angular 31: Inmersión en Formularios Basados en Plantillas
Los formularios basados en plantillas dejan que Angular construya el modelo del formulario por ti a ...
Comenzar lección - Paso 32
Angular 32: Fundamentos de Formularios Reactivos
Los formularios reactivos invierten el modelo de los formularios basados en plantillas: en lugar de ...
Comenzar lección - Paso 33
Angular 33: Validación de Formularios Reactivos
Los validadores son funciones simples que Angular ejecuta contra el valor de un control para decidir...
Comenzar lección - Paso 34
Angular 34: FormArray — Campos de Formulario Dinámicos
Un `FormArray` es la respuesta de los formularios reactivos a una lista de campos de longitud variab...
Comenzar lección - Paso 35
Angular 35: Fundamentos del Router de Angular
El Router de Angular mapea rutas de URL a componentes. Un arreglo `Routes` de pares `{ path, compone...
Comenzar lección - Paso 36
Angular 36: Parámetros de Ruta y Guards
Las rutas reales normalmente necesitan llevar datos en la propia URL — `path: 'user/:id'` captura lo...
Comenzar lección - Paso 37
Angular 37: Animaciones en Angular
El paquete `@angular/animations` te permite describir animaciones de forma declarativa, como datos, ...
Comenzar lección - Paso 38
Angular 38: Capstone del Módulo D — Un Feature de Formulario + Routing
Este capstone une todo lo del Módulo D en un pequeño feature realista: un formulario de registro con...
Comenzar lección - Paso 39
Angular 39: Servicios y providedIn: 'root'
Un servicio es simplemente una clase normal — lo que lo hace especial es el decorador `@Injectable({...
Comenzar lección - Paso 40
Angular 40: Fundamentos de HttpClient
`inject(HttpClient).get<T>(url)` devuelve un `Observable<T>` de RxJS — no pasa nada hasta que algo s...
Comenzar lección - Paso 41
Angular 41: Fundamentos de Observables de RxJS
Una Promise se resuelve una sola vez con un único valor. Un Observable es un stream: puede emitir ce...
Comenzar lección - Paso 42
Angular 42: Combinando Signals y RxJS
`toSignal(observable$, { initialValue })` lee el último valor emitido de un Observable como un signa...
Comenzar lección - Paso 43
Angular 43: Servicios personalizados con Signals como store de estado
El mismo patrón que reconocerías como un 'store' en Pinia, Zustand o un store de Svelte se traslada ...
Comenzar lección - Paso 44
Angular 44: Tokens de inyección de dependencias
`inject()` funciona muy bien para clases, pero a veces lo que quieres inyectar es un valor simple — ...
Comenzar lección - Paso 45
Angular 45: Interceptores HTTP
Un interceptor se sitúa entre cada llamada de HttpClient y la red, permitiéndote transformar peticio...
Comenzar lección - Paso 46
Angular 46: Patrones de gestión de estado
Todo lo que has construido desde la lección 43 — un servicio con un signal privado, un selector comp...
Comenzar lección - Paso 47
Angular 47: La API Resource
`resource()` es una primitiva declarativa para datos asíncronos ligados a una petición reactiva: le ...
Comenzar lección - Paso 48
Angular 48: Capstone del Módulo E
Es hora de combinar todo lo de este módulo en una pequeña feature realista: un servicio de tipo stor...
Comenzar lección - Paso 49
Angular 49: TypeScript con Angular
Angular no es un framework de JavaScript con tipado opcional añadido después: está diseñado para Typ...
Comenzar lección - Paso 50
Angular 50: Pruebas de componentes
Angular incluye soporte de pruebas de primera clase basado en Jasmine y el `TestBed` de Angular. `Te...
Comenzar lección - Paso 51
Angular 51: APIs standalone y bootstrapApplication
Toda aplicación Angular necesita un punto de entrada que arranque el componente raíz en el navegador...
Comenzar lección - Paso 52
Angular 52: Rendimiento — detección OnPush y track
Por defecto, Angular vuelve a verificar cada componente en cada ciclo de detección de cambios: barat...
Comenzar lección - Paso 53
Angular 53: Fundamentos de accesibilidad
La accesibilidad no es una librería aparte en Angular: son semántica HTML sencilla y un puñado de bi...
Comenzar lección - Paso 54
Angular 54: Manejo de errores
Los errores no capturados en cualquier parte de una app Angular — una expresión de template rota, un...
Comenzar lección - Paso 55
Angular 55: Variables de entorno y configuración
Las apps de Angular CLI guardan la configuración por entorno en archivos TypeScript simples — `envir...
Comenzar lección - Paso 56
Angular 56: Build de producción y despliegue
`ng build --configuration production` compila la app con Ahead-of-Time (AOT), minifica y aplica tree...
Comenzar lección - Paso 57
Angular 57: Mentalidad de migración — NgModules vs standalone
Antes de los componentes standalone, toda app Angular necesitaba al menos un `@NgModule`: un `AppMod...
Comenzar lección - Paso 58
Angular 58: Capstone — A producción
Aquí es — la última parada. Cada pieza de este curso aterriza en un solo componente: `signal()` y `c...
Comenzar lección