CanActivate makes the navigation button to be clicked twice in order for the screen to change

Question

I have this sign in method. when I try to the built in auth guard in my routing module, the sign in button needs to be clicked twice to be navigated to the next screen. But the console log string that i print shows up the first time. So it seems the the navigation is not working the first time.

If I click on sign in once and refresh the page, it takes me to the next page automatically as it shows I am signed it. So its just the router navigation thats not working the first time. I cannot figure out what went wrong. any idea?

sign in component

public signIn(email: string, password: string) {
this.authService.signIn(email, password)
  .then(() => {
    console.log("Signed In")
    this.router.navigate(["/control-panel"])
  })
  .catch(() => {
    this.errorText = this.sanitizer.bypassSecurityTrustHtml("Please enter valid email and password")
  })
}

Routing.module

const redirectLoggedInToControlPanel = () => redirectLoggedInTo(['/control-panel']);

const routes: Routes = [{ path: 'sign-in', component: SignInComponent, ...canActivate(redirectLoggedInToControlPanel) }]

Sign in html

<div class="row my-2">
    <div class="col-sm-12 text-center">
        <input type="button" class="btn" value="Log in"
            (click)="signIn(userName.value, userPassword.value)">
    </div>
</div>