Reaktyvumas Angular

Esant bet kokiems viešųjų savybių pakeitimams, šablonas reaguos reaktyviai, tai yra, akimirksniu keisis. Taip veikia reaktyvumas Angular.

Pažiūrėkime į pavyzdį. Tarkime, mes turime savybę, kurioje yra tekstas:

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

Atvaizduokime mūsų savybę kokiame nors tegė:

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

Dabar sukurkime mygtuką, kurį paspaudus būtų iškviečiamas klasės metodas:

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

Šiame metode pakeisime tekstą:

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

Dabar, jei paleisime kodą ir paspausime mygtuką, tekstas div elemente pasikeis iš karto po paspaudimo.

Задание 1

Sukurkite div ir du mygtukus. Padarykite taip, kad paspaudus pirmąjį mygtuką div'e atsirastų vienas tekstas, o paspaudus antrajį - kitas tekstas.