Реактивност во 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';
  }
}

Сега, ако се стартура кодот и се кликне на копчето, веднаш по кликот ќе се смени текстот во div-от.