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.
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.
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:
import { Renderer2 } from '@angular/core'
constructor(private renderer: Renderer2) { }
focoInput()
selectRootElement
coloque o id do campo que você quer dar o foco selectRootElement('#destino')
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!