CODEWITHSUNDEEP
angulartypescriptshow-hideangular-ng-if
krishna
krishna

Reputation: 43

How to hide show menu from different component in Angular 4

In my app component I have three component-

app.component.html

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

In my app-header component I have a nav bar with some navigation link, I want to hide-show some link base on user login status.

app-header.component.html

<nav>  
    <ul class="nav navbar-nav navbar-right" >

    <li><a class="white" routerLink="/register"> Register</a></li>

    <li><a class="white" routerLink="/login"> Login</a></li>

    <li (click)="onLogOut()"><span> LogOut</span></li>

  </ul>
 </nav>

I am storing a token on LocalStorage when user login, so If this token have some value then I want to hide login and register link from app-header component. how can I achive this because these link are in heder component. And I am storing token in different component

Please suggest how can I achive this.

Upvotes: 1

Views: 1682

Answers (1)

Praneeth Reddy
Praneeth Reddy

Reputation: 424

You can do it using ngIF.

<app-header *ngIf != "localStorage.getItem("token") == ''"></app-header>

or

You can declare a variable in your component, check the with localStorage.getItem("token"). based on assign this true or false.

Upvotes: 2

Related Questions