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

Question

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?