Angular Academy · Aula

Criando e lendo sinais

Declare sinais graváveis e leia seus valores.

Criando e lendo sinais é 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.

Criando um Signal

Você cria um Signal gravável com a fábrica signal(), passando o valor inicial.

import { signal } from '@angular/core';

const c = signal(0); // initial value is 0

O valor inicial define o tipo

O TypeScript infere o tipo do Signal a partir do valor inicial. signal(0) é um WritableSignal<number>.

const name = signal('Alice'); // WritableSignal<string>
const flag = signal(false);    // WritableSignal<boolean>

Lendo um Signal

Chame o Signal para ler seu valor atual. Isso retorna o valor armazenado e registra uma dependência se você estiver dentro de um contexto reativo.

const c = signal(0);
const current = c(); // current === 0

Lendo várias vezes

Você pode ler um Signal quantas vezes quiser. Cada chamada retorna o valor mais recente no momento da chamada.

const c = signal(10);
console.log(c()); // 10
console.log(c()); // 10

Tipagem explícita

Você pode fornecer um tipo explícito quando o valor inicial não o representa completamente, por exemplo, no caso de um valor que também pode ser nulo.

const user = signal<string | null>(null);
console.log(user()); // null

Signals de objetos

Um Signal pode armazenar qualquer valor, inclusive objetos e matrizes.

const point = signal({ x: 0, y: 0 });
console.log(point().x); // 0

Signals de matrizes

As matrizes funcionam da mesma forma. A leitura retorna a referência atual da matriz.

const items = signal<string[]>(['a', 'b']);
console.log(items().length); // 2

Signals como campos de classe

Em componentes e serviços, declare os Signals como campos. Eles são inicializados uma vez, quando a instância é criada.

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CounterStore {
  count = signal(0);
}

Lendo na classe do componente

Você pode ler um Signal em qualquer parte da classe, por exemplo dentro de um método, chamando-o.

export class CounterStore {
  count = signal(0);
  isZero(): boolean {
    return this.count() === 0;
  }
}

Acesso somente leitura

Se quiser expor um Signal sem permitir que os consumidores o alterem, você pode expô-lo por meio do método asReadonly().

const internal = signal(0);
export const value = internal.asReadonly();
// value() works; value.set is not available

Convenções de nomenclatura

Uma convenção comum é nomear o Signal de acordo com o valor que ele armazena (por exemplo, count e items), pois a leitura se parece com um acessador normal: count().

Verificação rápida: criando Signals

Teste seus conhecimentos sobre como criar e ler Signals.

Recapitulação: criar e ler

Agora você sabe criar um Signal gravável com signal(initialValue), como o TypeScript infere seu tipo e como lê-lo chamando-o. Você também viu asReadonly() para expor acesso somente leitura. A seguir: atualizar valores de Signals.

Perguntas Frequentes

A aula “Criando e lendo sinais” é grátis?

Sim — o texto completo de “Criando e lendo sinais” é 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 “Criando e lendo sinais”?

Declare sinais graváveis e leia seus 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 “Criando e lendo sinais”?

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