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';
  }
}

Эми, эгерде кодду иштетип, баскычка бассаңыз, анда басуу менен эле дивдеги текст өзгөрөт.

Задание 1

Бир див жана эки баскыч жасаңыз. Биринчи баскычка басуу менен дивге бир текст, экинчи баскычка басуу менен - башка текст келиши керек.