පාඩම 5: Logic සහ Data Binding එකතු කිරීම 🔗

TypeScript file එකේ දත්ත, HTML file එකේ පෙන්වන ආකාරය (Data Binding) ඉගෙන ගනිමු.

---

TypeScript File එකේ Logic එක සෑදීම

`src/app/app.component.ts` ගොනුව open කර, `AppComponent` class එක තුලට `count` නමින් variable එකක් සාදා, එහි අගය 0 ලෙස ලබා දෙන්න.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'counter-app';

  // මෙම කොටස අලුතින් එකතු කරන්න
  count: number = 0;
}

Data Binding (Interpolation)

දැන් අපිට TypeScript file එකේ ඇති `count` variable එකේ අගය HTML file එකේ පෙන්විය යුතුයි. ඒ සඳහා අපි **Interpolation** නම් ක්‍රමය භාවිතා කරනවා. එය `{{ variableName }}` ලෙස double curly braces තුල ලිවීමෙන් සිදු කරයි.

`src/app/app.component.html` ගොනුව open කර, `

0

` යන කොටසේ `0` වෙනුවට `{{ count }}` ලෙස වෙනස් කරන්න.

...
<div class="card-body">
  <!-- මෙම පේළිය වෙනස් කරන්න -->
  <h1 class="display-1">{{ count }}</h1>
</div>
...

Save කළ විට, browser එකේ පෙනුමේ වෙනසක් නැත. නමුත් දැන් එම අංකය පෙන්වන්නේ TypeScript file එකේ ඇති `count` variable එකෙනි. ඔබ `app.component.ts` ගොනුවේ `count` එකේ අගය 10 ලෙස වෙනස් කළහොත්, browser එකේ ද 10 ලෙස පෙනෙනු ඇත.

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