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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
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!