PricingLoginStart free
Angular Academy · Aula

Consultas de visualização com viewChild

Consulte elementos filhos como sinais.

Aula 4 de 413 etapas

Consultas de visualização com viewChild é 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.

Consultando a view

Os componentes frequentemente precisam de uma referência a um elemento ou componente filho em seu template. O Angular moderno fornece a função de consulta baseada em sinais viewChild().

Declarando uma viewChild

Chame viewChild() com um nome de referência do template ou um tipo de componente. O resultado é um sinal.

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

@Component({
  selector: "app-form",
  template: "<input #box>"
})
export class FormComponent {
  box = viewChild<ElementRef>("box");
}

Lendo a consulta

Como todos os sinais, leia uma consulta de view chamando-a. Ela retorna o elemento correspondente ou undefined até que a view esteja pronta.

focus() {
  this.box()?.nativeElement.focus();
}

Consultando um componente filho

Passe uma classe de componente para obter uma referência tipada a uma instância de componente filho.

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

child = viewChild(ChildComponent);

run() {
  this.child()?.doSomething();
}

Consultas de view obrigatórias

Use viewChild.required() quando o elemento consultado precisar existir. O sinal passa a ser não anulável.

box = viewChild.required<ElementRef>("box");

focus() {
  this.box().nativeElement.focus(); // no optional chaining
}

Consultando vários elementos

viewChildren() retorna um sinal que contém uma matriz somente leitura com todas as correspondências.

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

items = viewChildren(ItemComponent);

count() {
  return this.items().length;
}

Quando as consultas são resolvidas

As consultas de view baseadas em sinais são resolvidas depois que a view é inicializada. Lê-las em um effect garante que você aja assim que estiverem disponíveis.

constructor() {
  effect(() => {
    const el = this.box();
    if (el) el.nativeElement.focus();
  });
}

viewChild versus decorador ViewChild

O sinal viewChild() substitui o decorador clássico @ViewChild, integrando-se aos sinais e evitando, em muitos casos, o controle manual do momento do ciclo de vida.

// classic:
@ViewChild("box") box!: ElementRef;

// modern:
box = viewChild<ElementRef>("box");

Lendo um token específico

A opção read permite consultar um token diferente no elemento correspondente, como uma diretiva ou ElementRef.

tooltip = viewChild("trigger", { read: TooltipDirective });

contentChild para projeção

Para conteúdo projetado, em vez da própria view do componente, use as consultas correspondentes contentChild() e contentChildren().

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

header = contentChild(HeaderComponent);

Escolhendo a consulta correta

Use consultas de view para seu próprio template e consultas de conteúdo para conteúdo projetado; escolha a variante obrigatória quando o destino precisar existir e a variante plural para coleções.

Verificação rápida

Teste sua compreensão sobre consultas de view baseadas em sinais.

Responda na aula interativa

Recapitulação

O sinal viewChild() consulta elementos e componentes filhos em uma view de componente; use viewChild.required() para destinos garantidos, viewChildren() para coleções, a opção read para tokens específicos e contentChild() para conteúdo projetado.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
38
Aulas
144
Começar a aprender grátisVer o curso completo

Perguntas Frequentes

A aula “Consultas de visualização com viewChild” é grátis?

Sim — o texto completo de “Consultas de visualização com viewChild” é 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 “Consultas de visualização com viewChild”?

Consulte elementos filhos 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 4 de 4.

Quanto tempo leva a aula “Consultas de visualização com viewChild”?

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

  1. Entradas de sinais com input()
  2. Entradas obrigatórias e transformadas
  3. Saídas com output()
  4. Consultas de visualização com viewChild
← Voltar para Angular Academy