Como Selecionar um Elemento em um Template de Componente Angular

Neste artigo você aprenderá a selecionar um elemento em um Template de componente, utilizando o framework Angular

Fala programador(a), beleza? Bora aprender mais sobre Angular!

Uma das principais vantagens dos modernos frameworks de desenvolvimento front-end é a capacidade de criar componentes reutilizáveis, que encapsulam tanto a lógica como a apresentação.

No Angular, um dos frameworks mais populares, essa prática é muito comum.

Contudo, surgem dúvidas quanto a manipular elementos dentro destes componentes de maneira direta.

Neste artigo, você aprenderá como selecionar um elemento em um template de componente Angular.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

A Abordagem Tradicional: O Perigo do DOM Direto

Em JavaScript puro ou com bibliotecas mais antigas, era comum usar document.getElementById ou document.querySelector para selecionar e manipular elementos DOM.

No entanto, no Angular, essa prática não é recomendada.

Manipular o DOM diretamente pode causar inconsistências, já que o Angular possui seu próprio mecanismo de detecção de mudanças e renderização.

ViewChild e ElementRef: A Forma Angular

O Angular fornece um mecanismo eficiente e seguro para acessar elementos em seus templates: o ViewChild em combinação com ElementRef.

O Básico de ViewChild e ElementRef

ViewChild é um decorador que permite você se referir a um elemento ou diretiva dentro do template do componente. ElementRef, por outro lado, é uma classe de wrapper em torno de um elemento DOM real.

Veja um exemplo simples:

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-meu-componente',
  template: '<button #meuBotao>Clique em mim</button>'
})
export class MeuComponente implements AfterViewInit {
  @ViewChild('meuBotao', { static: false }) meuBotao: ElementRef;

  ngAfterViewInit() {
    // Acessa o elemento DOM real
    const botao: HTMLButtonElement = this.meuBotao.nativeElement;
    botao.click();
  }
}

Neste exemplo, usamos a referência local #meuBotao para identificar nosso botão. Depois, usamos ViewChild para obter uma referência ao botão como um ElementRef.

Finalmente, no método ngAfterViewInit, acessamos o elemento DOM real e disparamos um clique.

Por que Usar Renderer2 com ElementRef?

Embora o ElementRef nos dê acesso direto ao elemento DOM, ainda é uma boa prática usar o serviço Renderer2 para manipular o DOM.

Isso garante que a aplicação mantenha a compatibilidade em várias plataformas, como web, mobile ou desktop.

import { Component, Renderer2, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-meu-componente-renderer',
  template: '<button #meuBotaoRenderer>Clique em mim</button>'
})
export class MeuComponenteRenderer implements AfterViewInit {
  @ViewChild('meuBotaoRenderer', { static: false }) meuBotaoRenderer: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    this.renderer.setAttribute(this.meuBotaoRenderer.nativeElement, 'title', 'Um título');
  }
}

Neste exemplo, usamos o Renderer2 para definir um atributo title para nosso botão.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Selecionar e manipular elementos DOM em componentes Angular é diferente da abordagem tradicional de JavaScript.

É essencial entender as ferramentas e práticas recomendadas que o Angular fornece, como ViewChild, ElementRef e Renderer2.

Ao seguir estas práticas, você garante que seu aplicativo seja otimizado, seguro e compatível em diferentes plataformas.

Além disso, você estará alinhado com a filosofia do Angular, que busca proporcionar uma abstração clara entre lógica e apresentação, garantindo a modularidade e reusabilidade de seus componentes.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.