Angularda Reaktivlik

Ochiq xususiyatlardagi har qanday o'zgarishlarga shablon reaktiv tarzda javob beradi, ya'ni darhol o'zgaradi. Angular-da reaktivlik shunday ishlaydi.

Keling, bir misolni ko'rib chiqaylik. Faraz qilaylik, bizda matnni o'z ichiga olgan xususiyat mavjud:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

Keling, ushbu xususiyatimizni biron bir tegga chiqaraylik:

app/app.component.html<div>
  {{ text }}
</div>

Endi, bosilganda klass metodini chaqiradigan tugma yaratamiz:

app/app.component.html<button (click)="show()">
  show
</button>

Ushbu metodda matnni o'zgartiramiz:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public show(): void {
    this.text = 'hello';
  }
}

Endi, agar kodni ishga tushirsak va tugmani bossak, bosishdan so'ng darhol divdagi matn o'zgaradi.