Angular Academy · Aula

Entradas de sinais com input()

Declare entradas reativas como sinais.

Entradas de sinais com input() é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 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.

Inputs baseados em signals

O Angular moderno fornece a função input() para declarar inputs de componentes como signals, substituindo o decorador clássico @Input por uma alternativa reativa.

Declarando um input como signal

Chame input() com um valor padrão opcional. O resultado é uma signal somente leitura.

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

@Component({ selector: "app-greet", template: "" })
export class GreetComponent {
  name = input("World");
}

Lendo o input

Um input signal é lido chamando-o como uma função, tanto no código quanto nos modelos.

@Component({
  selector: "app-greet",
  template: "<p>Hello, {{ name() }}</p>"
})
export class GreetComponent {
  name = input("World");
}

Vinculando a partir do componente pai

O componente pai vincula um input signal exatamente como um input clássico, usando a vinculação de propriedade.

<app-greet [name]="userName"></app-greet>

// parent
userName = "Ada";

Inputs são somente leitura

Um input() simples é somente leitura dentro do componente. Não é possível chamar set nele; somente o componente pai altera seu valor.

// this is NOT allowed:
// this.name.set("x");
// inputs are read-only signals

Tipando inputs

Forneça um tipo genérico para garantir a segurança de tipos, especialmente quando não houver um valor padrão que possa ser inferido.

age = input<number>();
label = input<string>("Untitled");

Inputs em valores computados

Como os inputs são signals, eles se integram a computed para criar estados derivados que são atualizados automaticamente.

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

first = input("");
last = input("");
fullName = computed(() => this.first() + " " + this.last());

Inputs com effect

Você pode reagir às alterações dos inputs com effect, que é executado novamente sempre que uma signal lida é alterada.

constructor() {
  effect(() => {
    console.log("name is", this.name());
  });
}

Não é necessário usar ngOnChanges

Com inputs signal, muitas vezes você não precisa mais de ngOnChanges; computed e effect reagem às alterações por você.

Criando um alias para um input

Você pode expor um nome de vinculação público diferente com a opção alias.

value = input(0, { alias: "count" });

<!-- parent binds with the alias -->
<app-counter [count]="total"></app-counter>

Por que usar inputs signal

Inputs signal são reativos e oferecem segurança de tipos, além de se combinarem naturalmente com computed e effect, reduzindo o código repetitivo em comparação com a abordagem de decorador e ciclo de vida.

Verificação rápida

Teste sua compreensão dos inputs signal.

Recapitulação

A função input() declara inputs signal reativos e somente leitura. Leia-os chamando-os, defina seus tipos com genéricos, crie aliases quando necessário e combine-os com computed e effect em vez de ngOnChanges.

Perguntas Frequentes

A aula “Entradas de sinais com input()” é grátis?

Sim — o texto completo de “Entradas de sinais com input()” é 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 de sinais com input()”?

Declare entradas reativas como sinais. 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 1 de 4.

Quanto tempo leva a aula “Entradas de sinais com input()”?

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