Дырэктыва if у Angular

У Angular можна зрабіць так, каб тэг паказваўся ці хаваўся ў залежнасці ад значэння пераменнай. Для гэтага прымяняецца спецыяльная дырэктыва *ngIf. Давайце паглядзім, як з ёй працаваць.

Для пачатку гэтую дырэктыву трэба імпартаваць:

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

І дадаць яе ў раздзел імпартаў у дэкаратары:

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

Хай цяпер у нас ёсць наступная пераменная:

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

Давайце зробім дыў, які будзе паказаны, калі гэтая пераменная мае значэнне true:

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

А цяпер зробім так, каб дыў быў паказаны, калі нашая пераменная мае значэнне false:

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