Comment ouvrir un lien dans un nouvel onglet avec Angular ?
Le framework Angular, créé par les équipes de Google, permet de gérer entièrement l'affichage de son front-end avec le langage JavaScript. Bien qu'il fournisse un nombre important de méthodes et fonctions, on peut toujours utiliser les langages HTML et JavaScript pour des fonctionnalités simples. C'est notamment le cas pour gérer l'ouverture d'un lien dans un nouvel onglet.
Pour qu'un lien s'ouvre dans un nouvel onglet, on peut le définir simplement avec la balise HTML "a" qui correspond aux liens. L'attribut "target" permet de définir la cible d'ouverture du lien. En définissant la valeur "_blank", on indique que la page s'ouvre dans un nouvel onglet. Cette méthode ne fonctionne que lorsque le lien commence par "http".
Mon site (s'ouvre dans un nouvel onglet)
Si votre lien n'a pas ce format, vous pouvez alors utiliser les fonctions du langage JavaScript. La fonction "window.Open()" permet de créer une fenêtre secondaire dans laquelle ouvrir le lien. Le deuxième paramètre indique le type d'ouverture du lien. En indiquant la valeur "_blank", le lien sera ouvert dans un nouvel onglet. Vous pouvez créer votre propre fonction dans votre composant qui va appeler la fonction "window.Open()". Placez cette fonction dans votre fichier "component.ts".
ouvreNouvelOnglet(url: string){
window.open(url, "_blank");
}
Il ne vous reste plus qu'à appeler cette fonction lorsque vous souhaitez ouvrir un lien dans un nouvel onglet. On va l'appeler généralement lors d'un clic, via l'attribut (click) du framework, dans le fichier "component.html".
Mon site (s'ouvre dans un nouvel onglet)