Exercise Set 1: Components, Binding & Directives

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

ဒီ exercise set က Angular ရဲ့ အခြေခံဆုံး building block တွေဖြစ်တဲ့ component, data binding (property/event/two-way) နဲ့ structural directives (*ngIf, *ngFor, *ngSwitch) ကို လက်တွေ့ကျ ကျင့်သားရအောင် ရည်ရွယ်ထားပါတယ်။ Task တစ်ခုချင်းစီဟာ standalone အနေနဲ့ လုပ်လို့ရပြီး Basic chapter မှာ သင်ခဲ့တဲ့ concept တွေကို memory refresh လုပ်ဖို့ အသုံးဝင်ပါတယ်။ Solution ကို ကိုယ်ပိုင် attempt လုပ်ကြည့်ပြီးမှ answer ကို reference အနေနဲ့ ကြည့်ဖို့ အကြံပြုပါတယ်။

လေ့ကျင့်ခန်းများ

(1) `ProfileCardComponent` တစ်ခု ဆောက်ပြီး @Input() name, age ကို property binding နဲ့ ပြပါ။ (2) Button click တစ်ခုနဲ့ counter number ကို increment လုပ်ဖို့ event binding [(click)] အသုံးပြုပါ။ (3) Text input field တစ်ခုကို [(ngModel)] နဲ့ two-way bind လုပ်ပြီး ရိုက်ထည့်တဲ့ text ကို real-time preview ပြပါ။ (4) Array of string 5 ခုကို *ngFor နဲ့ list ပြပြီး array empty ဖြစ်ရင် "No items" ဆိုတဲ့ message ကို *ngIf နဲ့ ပြပါ။

• @Input() property binding ဖြင့် component data ပြသနိုင်ပြီ
• Event binding နှင့် two-way binding ([(ngModel)]) နှစ်မျိုးလုံးကို အသုံးချနိုင်ပြီ
• *ngFor and *ngIf structural directive များကို correct syntax ဖြင့် သုံးနိုင်ပြီ

Code နမူနာ

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

@Component({
  selector: 'app-profile-card',
  template: `
    <div class="card">
      <h3>{{ name }}</h3>
      <p>Age: {{ age }}</p>
    </div>
  `
})
export class ProfileCardComponent {
  @Input() name = '';
  @Input() age = 0;
}

// counter.component.ts (task 2 skeleton)
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count }}</p>
    <button (click)="increment()">+1</button>
  `
})
export class CounterComponent {
  count = 0;
  increment() {
    this.count++;
  }
}

Task 4 ခုစလုံးပြီးရင် profile card ပေါ်နေပြီး counter button နှိပ်တိုင်း number တိုးလာကာ input field ထဲရိုက်တာနဲ့ preview text ချက်ချင်းပြောင်းပြီး list/empty message မှန်ကန်စွာပြသည်။