Angularда реактивлик

Оммавий хоссалардаги ўзгаришларда, шаблон реактив равишда жавоб беради, яъни дарҳол ўзгаради. Angularда реактивлик шундай ишлайди.

Келинг, бир мисолда кўрамиз. Бизда матнни ўз ичига олган хосса бор дейлик:

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

Хоссамизни бирор тегда чиқарамиз:

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

Энди бизга сиқилганда класснинг методаси чақириладиган тугма ясаймиз:

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

Ушбу метода матнни ўзгартирамиз:

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

Энди, агар кодни ишга тушириб, тугмани боссак, босилиши билан дивдаги матн ўзгаради.