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 එකට එක් අක්ෂර පෙළක් ලැබෙන ආකාරයටත්, දෙවන බොත්තම මත ක්ලික් කිරීමෙන් වෙනත් අක්ෂර පෙළක් ලැබෙන ආකාරයටත් සකසන්න.