Close scrolling menu when url change Angular 13-CodePudding

For my Angular project I have a drop down menu for the user to navigate on his profile and I would like this drop down menu to close when the page changes, I tried with instanceof NavigationStart but I still failed to find the problem so here is my basic code :

header.component.ts

click: boolean = false
open: boolean = false;
currentUrl = this.router.url

constructor (private route: ActivatedRoute, private router: Router) {}

openMenu() {
  if(this.open === true){
    this.open = false
  }else {
    this.open = true
  }

}

And my header.component.html

 <div (click)="openMenu()" >
    <img src="../../../../assets/avatar/Avatar-Donkey.png" alt="">
</div>
<div [ngClass]="open ? 'isOpen' : 'isClose'" >
    <nav>
        <ul>
            <li> <a routerLink="private/dashboard">Mon profil</a> </li>
            <li> <a>Deconnexion</a> </li>
        </ul>
    </nav>
</div>

Do you have any idea on how can I handle the closing menu when the url change ? Thanks

CodePudding user response：

Listen to click event on your dropdown items`

<div (click)="openMenu()" >
    <img src="../../../../assets/avatar/Avatar-Donkey.png" alt="">
</div>
<div [ngClass]="open ? 'isOpen' : 'isClose'" >
    <nav>
        <ul>
            <li (click)="navigateToThePage('private/dashboard')"> 
    <a =>Mon profil</a> </li>
            <li> <a>Deconnexion</a> </li>
        </ul>
    </nav>
</div>

And then in your component`

public openMenu(): void {
  this.open = this.open !== true;
}

public navigateToThePage(url: string): void {
    this.openMenu();
    this.router.navigate([url]);
}