Question 160475 in Javascript Question posted in
A very good W3school tutorial can be found here.

Does Angular component not change in Javascript?

Im trying to give this navbar a new links when a user is log in. But when i login the layout does not change for example when a user log in i want to give user the option to logout but the component keeps giving me the login option

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="assets/blacklogo.png" alt="Promme" width="30" height="24">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item" *ngIf="!login">
          <a class="nav-link active" aria-current="page" routerLink="/home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/deals">Deals</a>
        </li>
      </ul>
      <div class="d-flex">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li  class="nav-item" *ngIf="login == false" routerLink="/login">
            <a class="nav-link " aria-current="page">Login</a>
          </li>
          <li class="nav-item" *ngIf="login == true" (click)="logout()">
            <a class="nav-link " aria-current="page">Logout</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

This is the TS component i event try using OnChange but still no results

import {Component, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import {AuthService} from "../../service/auth.service";

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit,OnChanges{

  login: Boolean | undefined;

  constructor(private auth:AuthService) {
  }


  ngOnInit(): void {
    console.log(this.isLogin())
    console.log("change")
  }

  isLogin(){
    return this.auth.isUserLoggedIn()
  }

  logout(){
    this.auth.logout()
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (this.isLogin()){
      this.login=true;
    }else {
      this.login=false;
    }
  }

}

i have try using onchange but its still the same

Tags:

2

Answers


  1. 0
    • in constructor, change your authService from private to public
    • in html, use *ngIf="auth.isLogin()"
    • in authService, create method isLogin(): boolean { // logic what to return}

    no need for onChange

    Login or Signup to reply.
  2. 0

    try this way:

    <li class="nav-item" *ngIf="!isLogin" routerLink="/login">
  <a class="nav-link" aria-current="page">Login</a>
</li>
<li class="nav-item" *ngIf="isLogin" (click)="logout()">
  <a class="nav-link" aria-current="page">Logout</a>
</li>


    export class AppComponent implements OnInit {
  constructor(private auth: AuthService) {}

  ngOnInit(): void {
    //...
  }

  get isLogin() {
    return this.auth.isUserLoggedIn();
  }

  // rest of your logics...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search