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 navbarponent.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 navbarponent.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 navabarponent.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.

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.ponent.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.ponent.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.ponent.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.

• javascript
• angular
• typescript
• angular-ng-if

• You have the same check for two different cases. You probably forgot a "not" (!) – ChatterOne Commented Sep 27, 2018 at 11:35
• 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 Commented Sep 27, 2018 at 11:36
• @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 Commented Sep 27, 2018 at 11:41
• Can you please tell where are you calling the function checkstorage()? – Manish Bansal Commented Sep 27, 2018 at 15:48

2 Answers 2

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 ponent. 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>

You can call the checkStorage function in your ponents constructor. Then you can easily use the *ngIf with your authenticate property:

<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>