Sinais em modelos
Vincule valores de sinais diretamente nos modelos de componentes.
Sinais em modelos é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 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.
Signals em templates
Uma das melhores características dos Signals é que você os lê diretamente nos templates, chamando-os, assim como em TypeScript. Nenhum pipe assíncrono é necessário.
Leitura em interpolação
No template, chame o Signal dentro da interpolação com chaves duplas para exibir seu valor.
@Component({
selector: 'app-counter',
template: '<p>Count: {{ count() }}</p>'
})
export class CounterComponent {
count = signal(0);
}Nenhum pipe assíncrono necessário
Com Observables, você precisava do pipe assíncrono para fazer a inscrição e cancelar a inscrição. Signals são síncronos, então basta chamá-los. Não há nada de que cancelar a inscrição.
Atualizações automáticas da visualização
Quando um Signal lido no template muda, o Angular sabe que esse template depende dele e atualiza apenas essa vinculação. Isso é a reatividade refinada em ação.
Chamando Signals em manipuladores de eventos
Vincule eventos a métodos do componente que atualizam Signals. O template renderiza novamente as vinculações afetadas de forma automática.
@Component({
selector: 'app-counter',
template: '<button (click)="inc()">{{ count() }}</button>'
})
export class CounterComponent {
count = signal(0);
inc() { this.count.update(v => v + 1); }
}Signals em vinculações de propriedades
Você pode chamar um Signal dentro de qualquer vinculação, incluindo vinculações de propriedades e atributos.
// disabled when count reaches 0
// template: <button [disabled]="count() === 0">Go</button>Signals com fluxo de controle integrado
Os templates modernos usam blocos integrados de fluxo de controle. Você lê um Signal dentro de um bloco if chamando-o.
// template:
// @if (count() > 0) {
// <p>Positive</p>
// }Signals computados em templates
Valores derivados são excelentes para templates. Um Signal computado é recalculado somente quando suas fontes mudam e é lido da mesma forma.
import { signal, computed } from '@angular/core';
export class CartComponent {
qty = signal(2);
price = signal(10);
total = computed(() => this.qty() * this.price());
}Lendo um valor computado na visualização
Leia o Signal computado no template como qualquer outro Signal.
// template: <p>Total: {{ total() }}</p>Por que isso é eficiente
Como o Angular acompanha exatamente quais expressões do template leem quais Signals, ele pode evitar trabalho nas partes da visualização que não dependiam do Signal alterado.
Armadilha comum: esquecer os parênteses
Se você escrever count em vez de count() em um template, exibirá a própria função do Signal, não seu valor. Sempre chame o Signal.
Verificação rápida: templates
Como os Signals aparecem nos templates?
Recapitulação: Signals em templates
Você lê Signals nos templates chamando-os com parênteses, sem pipe assíncrono e sem nada de que cancelar a inscrição. O Angular atualiza somente as vinculações que dependem de um Signal alterado, e Signals computados funcionam da mesma maneira. Você concluiu os fundamentos de Signals.
Perguntas Frequentes
A aula “Sinais em modelos” é grátis?
Sim — o texto completo de “Sinais em modelos” é 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 “Sinais em modelos”?
Vincule valores de sinais diretamente nos modelos de componentes. 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 4 de 4.
Quanto tempo leva a aula “Sinais em modelos”?
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.