Angular sharoitlarida reaktivlik

Reaktivlik shartlar bilan ham ishlaydi ngIf. Bu shuni anglatadiki, biz klass xususiyatida nima mavjudligiga qarab blokni ko'rsatishimiz yoki yashirishimiz mumkin.

Keling, amalda sinab ko'raylik. Faraz qilaylik, bizda quyidagi blok mavjud

app/app.component.html<div>
  matn
</div>

Keling, uni shartga qarab ko'rsatamiz yoki yashiramiz:

app/app.component.html<div *ngIf="isShow">
  matn
</div>

Endi ikkita tugma yarataylik. Birinchi tugma bosilganda blokimiz ko'rsatilsin, ikkinchi tugma bosilganda - yashirilsin:

app/app.component.html<button (click)="show()">
  ko'rsatish
</button>
<button (click)="hide()">
  yashirish
</button>

Keling, komponent klassiga blok ko'rsatiladimi yoki yo'qmi, buni boshqaradigan xususiyat qo'shamiz:

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

Endi blokni ko'rsatish va yashirish uchun uslublarimizni amalga oshiramiz:

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