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()">
  көрсету
</button>

Бұл әдісте мәтінді өзгертейік:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public show(): void {
    this.text = 'сәлем';
  }
}

Енді кодты іске қосып, түймені басқанда, дивтегі мәтін бірден өзгереді.

Задание 1

Див және екі түйме жасаңыз. Бірінші түймені басқанда дивке бір мәтін, ал екінші түймені басқанда - басқа мәтін шығуы үшін жасаңыз.