Reaktiviteti në Angular

Në çdo ndryshim të vetive publike, template do të reagojë reaktivisht, domethënë do të ndryshojë menjëherë. Kështu funksionon reaktiviteti në Angular.

Le të shohim një shembull. Le të themi se kemi një veti që përmban tekst:

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

Le ta shfaqim vetinë tonë në një tag:

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

Tani le të bëjmë një buton, në të cilin duke klikuar do të thirret një metodë e klasës:

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

Në këtë metodë le të ndryshojmë tekstin:

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

Tani, nëse e ekzekutojmë kodin dhe shtypim butonin, menjëherë pas klikimit do të ndryshojë teksti në div.