Angular'дагы шарттуу реактивдүүлүк

Реактивдүүлүк шарттуу ngIf менен да иштейт. Бул бизге классын касиетинин камтыган маалыматына жараша блоку көрсөтүү же жашыруу мүмкүнчүлүгүн берет.

Келгиле, практикада сынап көрөлү. Бизде төмөнкүдөй блок бар болсун

app/app.component.html<div>
  текст
</div>

Келгиле, аны шартка жараша көрсөтөлү же жашыралы:

app/app.component.html<div *ngIf="isShow">
  текст
</div>

Эми эки баскыч жасайлы. Биринчи баскычты басканда биздин блокубуз көрүнсүн, экинчисин басканда жашырылсын:

app/app.component.html<button (click)="show()">
  көрсөт
</button>
<button (click)="hide()">
  жашыр
</button>

Компоненттин класска блок көрсөтүлүп же көрсөтүлбөп жатканын жөнгө салчу касиетти кошолу:

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

Эми блокту көрсөтүү жана жашыруу ыкмаларыбыздын реализациясын жазалы:

app/app.component.tsexport class AppComponent {
  public isShow: boolean = true;
  
  public show(): void {
    this.isShow = true;
  }
  public hide(): void {
    this.isShow = false;
  }
}