Calling a function and passing it to *ngIf in Angular 6

Question

I'm new to Angular. Currently, the login functionality of the application is working. When the user logs in, it stores the user data in the local storage. I have a navbar which has two li elements: Login and Logout. When the user is logged in, I want Logout link to be displayed but when the user is logged out, the Logout link should be disappeared and Login link should appear.

In my navbar.component.ts file, I have a function where I'm checking if the localstorage contains any value then the function should return false and the logout link shouldn't be visible anymore and when the user is not logged in then only the login link should appear.

Here's my code for navbar.component.ts:

 authenticate: boolean = false;   
 token: any;

  checkStorage(){
    this.token = localStorage.getItem('user')
    if(this.token === null){
      this.authenticate = false;
      return this.authenticate;
    } else {
      this.authenticate = true;
      return this.authenticate;
    }

}

and here's navabar.component.html:

<ul class="navbar-nav">
        <li *ngIf="authenticate" class="nav-item">
          <a class="nav-link" href="#" routerLinkActive="active" routerLink="/login">Login</a>
        </li>
        <li *ngIf="authenticate"class="nav-item">
            <a class="nav-link" href="#" (click)="onLogout()">Logout</a>
          </li>
      </ul>

Any help would be appreciated. Thanks.

Edited: I have tried using *ngIf="!authenticate" on login yet it doesn't work. This just shows the login link on the navbar but once I'm logged in, the login link still remains there and logout link never shows up.

You have the same check for two different cases. You probably forgot a "not" (!) — ChatterOne
update the authenticate variable when user loggedIn and loggedOut by calling checkStorage method. Rest of the things works automatically. Use *ngIf="!authenticate" while displaying login — Pratap A.K
@PratapA.K adding ngIf="!authenticate" on login does hides the logout link. However, when I try to login, the login link remains there and logout link never shows. — hira12
Can you please tell where are you calling the function checkstorage()? — Manish Bansal

Asanka Asanka · Accepted Answer · 2018-09-27T11:49:34

after successful login do => this.authenticate = true; if the login unsuccessful => this.authenticate = false;

if you call checkStorage() method in ngOnInit() or constructor() it is call only once when initilizing the component. So yo have to do the above 2 things when a user trying to login (when call login() method).

and your checkStorage() should be

checkStorage(){
    this.token = localStorage.getItem('user')
    if(this.token === null){
      this.authenticate = false;
    } else {
      this.authenticate = true;
    }  
}

no need to return anything. and the html code should be

<ul class="navbar-nav">
  <li *ngIf="!authenticate" class="nav-item">
    <a class="nav-link" href="#" routerLinkActive="active" routerLink="/login">Login</a>
  </li>
  <li *ngIf="authenticate"class="nav-item">
    <a class="nav-link" href="#" (click)="onLogout()">Logout</a>
  </li>
</ul>

Calling a function and passing it to *ngIf in Angular 6

2 Answers