Angular 4 button with click(returnsbooleanVAR) function and routerlink + boolean VAR timing

I have a button that has a funcion on (click) that sets a variable "routingActivated" true or false and then in the same button a routerlink that links to another component if that var is true.. Everything works fine but in order to go to the next component I have to CLICK twice the button.. Any thoughts of how to re-do it so I only have to click once?

This is the button :

<button  (click)="check()"  [routerLink]="routingActivated ? ['/enviando']: []"  >Continue</button>

this is the check function that changes the var routingActivated to true or false

check():void{
routingActivated =true/false  //depending on a condition 
}

Answers 1

  • You can directly redirect in your component

    import {Router} from '@angular/router';
    
    export class InfoComponent {
        constructor(private router: Router)
    
        check():void{
            if(routingActivated) {
                this.router.navigate(['./enviando']);
            }
        }
    }
    

    and simplify your HTML

    <button  (click)="check()">Continue</button>
    

Related Articles