Angular Academy · Aula

Entradas obrigatórias e transformadas

Marque entradas como obrigatórias e transforme valores.

Entradas obrigatórias e transformadas é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Além dos inputs básicos

Inputs signal oferecem dois recursos avançados: marcar um input como required e transformar os valores recebidos antes que sejam armazenados.

Inputs obrigatórios

Use input.required() quando o componente pai precisar sempre fornecer um valor. Não há valor padrão.

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

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

Por que os inputs obrigatórios são importantes

Se um input obrigatório não estiver vinculado, o Angular informará um erro, detectando problemas antecipadamente em vez de permitir que um valor indefinido passe despercebido.

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

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

Inputs obrigatórios não são nulos

Como um input obrigatório precisa ser fornecido, seu tipo nunca é undefined; assim, você pode lê-lo com segurança sem verificações de nulo.

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

Transformando inputs

A opção transform executa uma função no valor recebido antes que ele seja armazenado, o que é útil para coerção.

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

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

Coerção booleana

O Angular fornece booleanAttribute para converter valores no estilo de atributos em valores booleanos reais, o que é útil para atributos baseados em presença.

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

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

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

Coerção numérica

Da mesma forma, numberAttribute converte um atributo de string em um número.

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

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

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

Funções de transformação personalizadas

Você pode escrever qualquer transformação para normalizar valores, como remover espaços em strings.

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

Tipos de input e output da transformação

Uma transformação pode aceitar um tipo e armazenar outro. O tipo aceito é aquele que os componentes pais vinculam; o tipo armazenado é aquele que você lê.

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

Obrigatório e transformação juntos

Você pode combinar required com uma transformação passando o objeto de opções para input.required().

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

Quando usar cada recurso

Use required para impor uma vinculação obrigatória e transformações para converter ou normalizar os dados recebidos, mantendo a lógica do componente limpa e consistente.

Verificação rápida

Teste sua compreensão de inputs obrigatórios e transformados.

Recapitulação

Use input.required() para inputs obrigatórios (não anuláveis e sem valor padrão) e a opção transform, incluindo booleanAttribute e numberAttribute, para converter valores. Ambos podem ser combinados.

Perguntas Frequentes

A aula “Entradas obrigatórias e transformadas” é grátis?

Sim — o texto completo de “Entradas obrigatórias e transformadas” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Entradas obrigatórias e transformadas”?

Marque entradas como obrigatórias e transforme valores. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Entradas obrigatórias e transformadas”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy