En tant que développeur Frontend, vous rencontrez une situation où vous devez afficher un composant uniquement si vous accédez au tableau de bord ou à votre composant de connexion. Pour le reste, vous devez vous cacher.

Comment vas-tu gérer tout ça en angular ??

Well Angular vous fournit divers événements et propriétés de routeur que vous pouvez utiliser pour savoir sur quel routeur se trouve actuellement l'utilisateur.

Nous discuterons de l'événement NavigationEnd de la route angulaire

Qu'est-ce que la fin de navigation ? ?

Un événement déclenché lorsqu'une navigation se termine avec succès.

Comment utiliser??

• À l'intérieur du constructeur, vous vous abonnez aux événements du routeur.
• Ensuite, vous vérifierez que subscribed val est une instance de Navigation End ou non .
• Si oui, vous utiliserez cette valeur souscrite et utiliserez value.url pour trouver l'url où l'utilisateur a navigué actuellement et mettre la logique à l'intérieur.
• Enfin, vous écrirez votre logique en fonction de value.url

Mon app.component.html ressemble à ceci

Ici, vous pouvez voir que je montre l'en-tête uniquement si la propriété "showHeader" est vraie

Mon app.component.ts ressemble à ceci

Maintenant, si je clique sur le bouton Soumettre, il sera acheminé vers le «tableau de bord»
et affichera le composant du tableau de bord.

* Par conséquent, le composant d'en-tête devient visible *

Le référentiel de travail de référence
https://stackblitz.com/edit/angular-ivy-atods7?file=src/app/app.component.ts

Lien Github
https://github.com/deepa314/angular-ivy-atods7.git

J'espère que cela vous aidera les gars :)
Si vous aimez s'il vous plaît aimez, partagez et abonnez-vous