如何在 Angular 中使用 ngIf

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>

Answer 1

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

Answer 2

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>

Answer 3

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