The if directive in Angular

In Angular, you can make a tag show or hide depending on the value of a variable. For this, a special directive *ngIf is used. Let's see how to work with it.

First, this directive needs to be imported:

app/app.component.tsimport {NgIf} from "@angular/common";

And add it to the imports section in the decorator:

app/app.component.ts@Component({
  .....
  imports: [....., NgIf],
  ....
})

Now let us have the following variable:

app/app.component.tsexport class AppComponent {
  public isAdmin: boolean = true;
}

Let's make a div that will be shown if this variable has a value of true:

app/app.component.html<div *ngIf="isAdmin">
  text
</div>

Now let's make it so that the div is shown if our variable has the value false:

app/app.component.html<div *ngIf="!isAdmin">
  text
</div>