Angular : comment faire un focus sur une barre de recherche ?
Le framework Angular permet une utilisation poussée du langage JavaScript dans le développement de votre site internet. Vous pouvez créer tout votre front-end avec ce seul langage et le framework. Bien qu'il fournisse de nombreuses méthodes, on peut utiliser les fonctions natives du langage JavaScript. C'est notamment utile pour gérer le focus sur un champ.
Il existe deux possibilités pour faire un focus sur un champ et cela dépend de ce que vous voulez faire. La première est l'attribut HTML "autofocus". Il permet d'effectuer un focus automatiquement sur un champ la première fois qu'il est affiché. Il suffit de l'ajouter dans votre balise. Cette option ne fonctionnera donc qu'une seule fois, lorsque votre composant affichera le champ.
La deuxième solution utilise le langage JavaScript. La fonction "focus()" permet d'effectuer automatiquement le focus sur un élément du DOM, à chaque fois qu'elle est appelée. Pour accéder à un élément du DOM depuis le code de votre composant Angular, vous devez utiliser l'attribut "nativeElement" qui vous donne l'élément DOM correspondant à votre attribut. Si vous venez d'afficher cet élément, il est conseillé de laisser un peu de temps au navigateur pour qu'il voie que le champ est visible avant d'effectuer le focus dessus. La méthode "setTimeout" permet d'attendre un temps défini avant d'exécuter un morceau de code.
afficherRecherche() {
//Affichage de l'élément
this.show = !this.show;
setTimeout(()=>{ // On attend que le booléen ait bien été modifié avant de faire le focus
this.searchElement.nativeElement.focus();
},0);
}