რეაქტიულობა 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-ში.

Задание 1

გააკეთეთ div და ორი ღილაკი. გახადეთ ისე, რომ პირველ ღილაკზე დაწკაპუნებისას div-ში შევიდეს ერთი ტექსტი, ხოლო მეორეზე დაწკაპუნებისას - სხვა ტექსტი.