Pourquoi mon composant ne savait-il pas si je suis logiqué - angulaire 7

Lorsque je suis logiqué, ma navigation NAVBAR pour la première fois n'a pas reconnu cela, mais lorsque je rafraîchis la page, cela savait simplement. Dans cet exemple, il n'a pas d'abord Console.log («logiqué») avant d'actualiser la page. Voici le code

APP.COMPONENT.HTML P>

login(){
    // Get phoneNumber and password
    const val = this.loginForm.value
    if(val.phoneNumber && val.password){
      this.auth.login(val.phoneNumber, val.password).subscribe(
        (next) => {
          console.log('User is login')
          // Get userId, token, userTypeId, save at localStorage
          this.user = next
          console.log(this.user)
          localStorage.setItem('userId', this.user.data.userId)
          localStorage.setItem('token', this.user.token)
          localStorage.setItem('userTypeId', this.user.data.userType.id)
          // Set isLoggined = true
          localStorage.setItem('isLoggined', 'true')
          this.router.navigateByUrl('/')

        },
        (err) => {
          console.log(err)
        }
      )
    }
  }