Why do I have to click two times on a button to be redirected to the right url?

I have this click event written with Angular material in the app.component.html file:

<button mat-icon-button class="icon account-icon" aria-label="Icon-button with account icon" (click)="gotoLoginPage()" routerLink={{url}}  routerLinkActive="active">
    <mat-icon>account_circle</mat-icon>
  </button>

The variable url is set in the app.component.ts file in this way:

public url!: string;

public gotoLoginPage():void{
    if(this.currentLogIn){
      this.url="/users"
      console.log(this.url);
    }
    else{
      this.url="/users/searchUser/by_email"
      console.log(this.url);
    }

The problem is that I have to click two times on the button (instead of one) to be redirected to the right url. Do you know why and how to resolve the problem?

Just in case somebody is facing my same problem, I resolved it in this way:

In app.component.html, instead of the following:

<button mat-icon-button class="icon account-icon" aria-label="Icon-button with account icon" (click)="gotoLoginPage()" routerLink={{url}}  routerLinkActive="active">
    <mat-icon>account_circle</mat-icon>
  </button>

I did this:

<div *ngIf="!currentLogIn">
  <button mat-icon-button class="icon account-icon" aria-label="Icon-button with account icon" (click)="gotoLoginPage()" routerLink="/users/searchUser/by_email"  routerLinkActive="active">
    <mat-icon>account_circle</mat-icon>
  </button>
</div>
  <button mat-icon-button class="icon shopping cart-icon" aria-label="Icon-button with shopping cart icon" (click)="getCartByUser()"  routerLink="/carts/cart_by_user"  routerLinkActive="active">
    <mat-icon>shopping_cart</mat-icon>
  </button>

In order to distinguish the two cases in the html code instead of doing it in the app.component.ts file. So now, the app.component.ts file looks like this:

export class AppComponent implements OnInit {
    constructor()
    ngOnInit():void {}
    public gotoLoginPage():void{}
}