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;
}

Եկեք ստեղծենք div, որը կցուցադրվի, եթե այս փոփոխականն ունի true արժեք.

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

Իսկ հիմա եկեք անենք այնպես, որ div-ը ցուցադրվի, եթե մեր փոփոխականն ունի false արժեք.

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