මොඩියුලය 3: Components, Templates & Data Binding

Component එකක් ප්‍රධාන කොටස් 4 කින් සමන්විත වේ:

• Class: Component එකේ දත්ත (properties) සහ ක්‍රියාකාරීත්වය (methods) අඩංගු TypeScript class එක.
• Template: Component එකේ දර්ශනය (view) නිර්වචනය කරන HTML.
• Metadata: `@Component` decorator එක මගින් Class එක Component එකක් ලෙස හඳුන්වා දෙන අතර, selector, templateUrl, styleUrls වැනි වින්‍යාස (configurations) අඩංගු වේ.
• Styles: Component එකට පමණක් අදාළ වන CSS styles.

// user-profile.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-user-profile', // How you use this component in HTML ()
  templateUrl: './user-profile.component.html', // Link to the HTML file
  styleUrls: ['./user-profile.component.css'] // Link to the CSS file
})
export class UserProfileComponent {
  // --- Class Properties ---
  userName: string = 'සුපුන් පෙරේරා';
  userRole: string = 'Developer';

  // --- Class Method ---
  showRole() {
    alert(`My role is: ${this.userRole}`);
  }
}

Data Binding යනු Component Class එක (TypeScript) සහ Template එක (HTML) අතර සන්නිවේදනය කිරීමයි. ප්‍රධාන ක්‍රම 4 කි.

1. Interpolation (One-way binding: TS to HTML)

Class එකේ ඇති දත්තයක් Template එකේ පෙන්වීම සඳහා {{ }} භාවිතා කරයි.

<h1>Welcome, {{ userName }}!</h1>

2. Property Binding (One-way binding: TS to HTML)

HTML element එකක property එකකට (උදා: `src`, `disabled`) Class එකේ දත්තයක් bind කිරීමට [ ] භාවිතා කරයි.

<img [src]="imageUrl">
<button [disabled]="isButtonDisabled">Click Me</button>

3. Event Binding (One-way binding: HTML to TS)

HTML element එකක event එකක් (උදා: `click`, `keyup`) සිදු වූ විට Class එකේ method එකක් ක්‍රියාත්මක කිරීමට ( ) භාවිතා කරයි.

<button (click)="saveData()">Save</button>

4. Two-Way Binding

දත්ත Class එකේ සිට Template එකටත්, Template එකේ සිට Class එකටත් එකවර යාවත්කාලීන වේ. [(ngModel)] directive එක භාවිතා කරයි (මෙය `FormsModule` හි කොටසකි).

<input [(ngModel)]="userName">
<p>You are typing: {{ userName }}</p>

Directives යනු DOM (Document Object Model) එකේ පෙනුම හෝ හැසිරීම වෙනස් කරන උපදෙස් වේ.

Structural Directives

HTML layout එක වෙනස් කරයි. (DOM එකට elements එකතු කිරීම, ඉවත් කිරීම, හෝ නැවත සකස් කිරීම). ඒවාට පෙර * ලකුණක් ඇත.

• *ngIf: කොන්දේසියක් සත්‍ය නම් element එකක් පෙන්වයි.
• *ngFor: Array එකක ඇති દરેક අයිතමයක් සඳහා element එකක් නැවත නැවතත් නිර්මාණය කරයි.

<div *ngIf="isLoggedIn">Welcome back, user!</div>

<ul>
  <li *ngFor="let user of users">{{ user.name }}</li>
</ul>

Attribute Directives

Element එකක පෙනුම හෝ හැසිරීම වෙනස් කරයි (නමුත් DOM ව්‍යුහය වෙනස් නොකරයි).

• ngClass: කොන්දේසි මත පදනම්ව CSS class එකතු කරයි/ඉවත් කරයි.
• ngStyle: කොන්දේසි මත පදනම්ව inline styles යොදයි.

<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }">...</div>

විවිධ Components අතර දත්ත හුවමාරු කරගැනීම සඳහා Angular හි ක්‍රම කිහිපයක් ඇත.

• @Input(): Parent component එකක සිට Child component එකකට දත්ත යැවීම සඳහා.
• @Output() සහ EventEmitter: Child component එකක සිට Parent component එකකට දත්ත (event එකක් ලෙස) යැවීම සඳහා.

මෙම මාතෘකා ඉදිරි මොඩියුල වලදී වඩාත් විස්තරාත්මකව ආවරණය කෙරේ.