Angular Academy · Lección

Inputs obligatorios y transformados

Marque inputs como obligatorios y transforme sus valores.

Inputs obligatorios y transformados es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Más allá de los inputs básicos

Los inputs signal admiten dos funciones potentes: marcar un input como obligatorio y transformar los valores recibidos antes de almacenarlos.

Inputs obligatorios

Use input.required() cuando el padre deba proporcionar siempre un valor. No hay ningún valor predeterminado.

import { input } from "@angular/core";

export class UserComponent {
  userId = input.required<string>();
}

Por qué son importantes los inputs obligatorios

Si no se vincula un input obligatorio, Angular informa de un error y detecta el problema pronto, en lugar de permitir que se cuele un valor indefinido.

<!-- error: userId is required -->
<app-user></app-user>

<!-- correct -->
<app-user [userId]="id"></app-user>

Los inputs obligatorios no son nulos

Como se debe proporcionar un input obligatorio, su tipo nunca es undefined, por lo que puede leerlo de forma segura sin comprobaciones de nulos.

userId = input.required<string>();
load() {
  return this.api.get(this.userId()); // always a string
}

Transformación de inputs

La opción transform ejecuta una función sobre el valor recibido antes de almacenarlo, lo que resulta útil para realizar conversiones.

import { input } from "@angular/core";

export class ToggleComponent {
  disabled = input(false, { transform: (v: unknown) => !!v });
}

Conversión a booleano

Angular incluye booleanAttribute para convertir valores con formato de atributo en booleanos reales, algo práctico para atributos cuya presencia representa un valor.

import { input, booleanAttribute } from "@angular/core";

disabled = input(false, { transform: booleanAttribute });

<!-- both work -->
<app-btn disabled></app-btn>
<app-btn [disabled]="true"></app-btn>

Conversión a número

De forma similar, numberAttribute convierte un atributo de cadena en un número.

import { input, numberAttribute } from "@angular/core";

count = input(0, { transform: numberAttribute });

<!-- string "5" becomes number 5 -->
<app-counter count="5"></app-counter>

Funciones de transformación personalizadas

Puede escribir cualquier transformación para normalizar valores, como eliminar espacios al principio y al final de las cadenas.

label = input("", {
  transform: (v: string) => v.trim()
});

Tipos de entrada y salida de la transformación

Una transformación puede aceptar un tipo y almacenar otro. El tipo aceptado es el que vinculan los padres; el tipo almacenado es el que usted lee.

// accepts string | number, stores number
size = input(0, {
  transform: (v: string | number) => Number(v)
});

Combinación de obligatorio y transformación

Puede combinar required con una transformación pasando el objeto de opciones a input.required().

value = input.required({
  transform: numberAttribute
});

Cuándo usar cada opción

Use required para exigir una vinculación obligatoria y las transformaciones para convertir o normalizar los datos recibidos, manteniendo la lógica del componente clara y coherente.

Comprobación rápida

Compruebe su comprensión de los inputs obligatorios y transformados.

Resumen

Use input.required() para los inputs obligatorios (no anulables y sin valor predeterminado) y la opción transform, incluidos booleanAttribute y numberAttribute, para convertir valores. Ambas opciones se pueden combinar.

Preguntas frecuentes

¿La lección «Inputs obligatorios y transformados» es gratis?

Sí — el texto completo de «Inputs obligatorios y transformados» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Inputs obligatorios y transformados»?

Marque inputs como obligatorios y transforme sus valores. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Inputs obligatorios y transformados»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy