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