පාඩම 6: Button Clicks හැසිරවීම (Event Binding) 🖱️

HTML බොත්තම් click කළ විට TypeScript functions ක්‍රියාත්මක කරමු.

---

Functions නිර්මාණය කිරීම

`src/app/app.component.ts` ගොනුවේ, අපගේ `count` variable එකට පහළින්, අගය වැඩි කිරීමට, අඩු කිරීමට සහ reset කිරීමට functions 3ක් සාදා ගනිමු.

export class AppComponent {
  title = 'counter-app';
  count: number = 0;

  // මෙම functions 3 අලුතින් එකතු කරන්න
  increment() {
    this.count = this.count + 1;
  }

  decrement() {
    if (this.count > 0) {
      this.count = this.count - 1;
    }
  }

  reset() {
    this.count = 0;
  }
}

Event Binding

දැන් මෙම functions, HTML බොත්තම් වල click event එකට සම්බන්ධ කළ යුතුයි. ඒ සඳහා **Event Binding** `(click)="functionName()"` භාවිතා කරයි.

`src/app/app.component.html` ගොනුවේ ඇති බොත්තම් 3 පහත පරිදි වෙනස් කරන්න.

...
<div class="card-footer">
  <button class="btn btn-success me-2" (click)="increment()">Plus (+)</button>
  <button class="btn btn-warning me-2" (click)="reset()">Reset</button>
  <button class="btn btn-danger" (click)="decrement()">Minus (-)</button>
</div>
...

සියල්ල save කර දැන් browser එක බලන්න. Plus, Minus සහ Reset බොත්තම් click කළ විට counter එක නිවැරදිව ක්‍රියාත්මක වන බව ඔබට පෙනෙනු ඇත!

සුබ පැතුම්! ඔබ ඔබගේ පළමු Angular Application එක සාර්ථකව නිර්මාණය කර ඇත.

⬅️ මුල් පිටුවට