<a> element href stops working with (click) on it

Question

My navbar.html:

 <li>
 <a (click)="Close= !Close" href="/page1" >This Page</a>
 </li>
 <li>
 <a (click)="Close= !Close" href="/page2" >Another Page</a>
 </li>

app.html :

<app-navbar></app-navbar>
<router-outlet></router-outlet>

I have a menu that opens and close if the Close variable is true or false with the help of css using transitions. Right now if i click on an element of the menu, my navbar blinks back to close state without animation and reload the content of the page. The solution i found was to add the (click)="Close= !Close" to each element of the menu, so they could control the open/close animation too.

When i added (click)="Close= !Close" to each element attribute the href stoped redirecting, I removed (click)="Close= !Close" and confirmed that it was causing my href to do its work.

This works:

 <li>
 <a href="/page1" >This Page</a>
 </li>

This dont:

 <li>
 <a (click)="Close= !Close" href="/page1" >This Page</a>
 </li>
 <li>

Is it normal? Is there any workaround? I need to use another type of href on Angular?

<------------- UPDATE 1--------------->

When i hover over the element it shows correctly the link where this element should take me, event with (click)="Close= !Close" in the attributes

Answer 1

Use routerLink

<a (click)="Close= !Close" [routerLink]="['/page1']" >This Page</a>