Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como setar o foco em um objeto DOM no Angular

Bom dia! Como faço para setar o foco em um objeto do DOM. No caso desta aplicação, após clicar no botão Transferir, quero setar o foco no input box Destino.

2 respostas
solução!

Olá Alexandre, tudo bem?

Você pode utilizar a classe Renderer2 e utilizar o método selectRootElement para acessar o elemento do HTML e dar foco ao campo, assim:

  • Importe a classe Renderer2 no componente: import { Renderer2 } from '@angular/core'
  • Injete a classe no construtor do componente: constructor(private renderer: Renderer2) { }
  • Crie um método para dar foco ao campo que você deseja: nesse exemplo criei o focoInput()
  • Dentro de selectRootElement coloque o id do campo que você quer dar o foco selectRootElement('#destino')
  • Acrescente o método dentro da função transferir()

nova.transferencia.ts

import { Component, EventEmitter, Output, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-nova-transferencia',
  templateUrl: './nova-transferencia.component.html',
  styleUrls: ['./nova-transferencia.component.scss'],
})
export class NovaTransferenciaComponent {
  @Output() aoTransferir = new EventEmitter<any>();

  constructor(private renderer: Renderer2) { }

  valor: number;
  destino: number;

  transferir() {
    console.log('Solicitada nova transferência');
    const valorEmitir = { valor: this.valor, destino: this.destino };
    this.aoTransferir.emit(valorEmitir);

    this.limparCampos();
    this.focoInput();
  }

  limparCampos(){
    this.valor = 0;
    this.destino = 0;
  }

  focoInput() {
    this.renderer.selectRootElement('#destino').focus();
  }
}

Assim, acredito que conseguirá o comportamento que deseja.

Espero ter ajudado, bons estudos!

Boa noite Nayanne Batista!

Funcionou perfeitamente! Muito obrigado pelo apoio!