Reactivlik Angular-da

Ictimai xassələrdə hər hansı dəyişiklik olduqda, şablon reactiv şəkildə reaksiya verəcək, yəni dərhal dəyişəcək. Angular-da reactivlik belə işləyir.

Gəlin bir nümunəyə baxaq. Tutaq ki, bizim mətni ehtiva edən bir xassəmiz var:

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

Gəlin xassəmizi hər hansı bir teq-də çıxaraq:

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

İndi isə kliklədikdə sinif metodunu çağıracaq bir duymə edək:

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

Bu metodun içində mətni dəyişək:

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

İndi kodu işə salıb duyməni klikləsək, dərhal klikdən sonra div-dəki mətn dəyişəcək.