How to use ngIf in Angular

Question

I'm new at Angular and my question is this. I have to get user's details and based on user type I want to show different things.

public user = [];
ngOnInit() {
   this.httpServiceToServe.getType().subscribe(
      data => this.user = data
   );
}

For instance, if this user is admin, I want to show the Dashboard:

<li routerLinkActive="active" *ngIf="user.type == 'admin'">
   <a routerLink="/adminDashboard">
      <i class="now-ui-icons education_atom"></i>
      <p>Admin Dashboard</p>
   </a>
</li>

In *ngIf, if expression evaluates to false, whole `li` element will be hidden. Is this what you want? — , Sep 12 '18 at 18:45
And I don't think this is how routerLinkActive is used. https://angular.io/api/router/RouterLinkActive#description — , Sep 12 '18 at 18:49
If you are trying some sort of conditional routing (redirect to a route if some condition is true, then maybe this will help. https://stackoverflow.com/questions/34660263/angular2-conditional-routing. — , Sep 12 '18 at 18:58

Nikita Marinosyan · Answer 1 · 2019-02-15T08:45:41.600

First of all I recommend you to take Angular Tour of Heroes tutorial.

As for your question, you are doing everything right. You can just add two tags with *ngIf to your template file:

<div *ngIf="user.type === 'admin'">You are admin</div>
<div *ngIf="user.type !== 'admin'">Your are ordinary user</div>

So Angular will detect changes of user.type value and update the view accordingly. Also note that in Javascript/Typescipt using == is a bad practice. Use === instead.

However, even better solution would be use of if/else:

<div *ngIf="user.type === 'admin'; else basicUserTemplate">
    admin data
</div>
<ng-template #basicUserTemplate>
    basic user data
</ng-template>

If there are more than 2 user roles in your app, use ngSwitch

rather then using two if for same variable , better to make use of ngif/else — Pranay Rana, Feb 15 '19 at 08:29

score 1 · Answer 2 · answered Sep 12 '18 at 18:47

1

Another way you can do the if/else scenario if it is binary you can use the following in your templates.

<div *ngIf="user.type === 'admin'; else user">You are admin</div>
<ng-template #user>
  <div>Your are ordinary user</div>
</ng-template>

answered Sep 12 '18 at 18:47

Mike Tung

4,735
1
17
24

score 0 · Answer 3 · answered Feb 15 '19 at 08:25

*ngIf is structural directive of angular framework, it plays role in html dom structure either element get displayed or not. so in following

<ng-container
  *ngIf="user.type == 'admin'; then admin; else otheruser">
</ng-container>

<ng-template #admin>
  <div>
    Admin.
    <li routerLinkActive="active" >
          <a routerLink="/adminDashboard">
            <i class="now-ui-icons education_atom"></i>
            <p>Admin Dashboard</p>
          </a>
        </li>
  </div>
</ng-template>
<ng-template #otheruser>
  <div>
    other user 
  </div>
</ng-template>

if condition is not true element is not going to be part of html dom and not get displayed, if true then element get displayed and going to be part of html dom.

Above make use of *ngIf/Else, which means if user is not admin then other user template get displayed and if user is admin then admin user template get displayed.

How to use ngIf in Angular

3 Answers3