-1

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?

1 Answers1

2

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{}
}