Exercise Set 2: Services, Forms & RxJS

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

ဒီ exercise set ကတော့ Exercise Set 1 ထက် တစ်ဆင့်တက်ပြီး Intermediate/Advanced chapter တွေမှာ သင်ခဲ့တဲ့ service, reactive form validation, HTTP client နဲ့ RxJS operator (map, filter) တွေကို ပေါင်းစပ်အသုံးချကြည့်ရမှာဖြစ်ပါတယ်။ Task တစ်ခုစီက production app တွေမှာ တွေ့ရလေ့ရှိတဲ့ pattern တွေဖြစ်တဲ့အတွက် ဒီအလေ့အကျင့်တွေက real-world project တည်ဆောက်ရာမှာ တိုက်ရိုက်အသုံးဝင်ပါလိမ့်မယ်။ Task တွေကို အစဉ်လိုက် အခက်တက်မြင့်တက်အောင် စီထားတာမို့ အရင် task ရဲ့ solution ကို နောက် task မှာ reuse လုပ်နိုင်ပါတယ်။

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

(1) `CounterService` တစ်ခု ဆောက်ပြီး BehaviorSubject<number> နဲ့ state ကို hold ထားကာ increment()/decrement()/reset() method သုံးခု implement လုပ်ပါ — component နှစ်ခုက ဒီ service တစ်ခုတည်းကို share ပြီး sync ဖြစ်အောင် စမ်းကြည့်ပါ။ (2) SignupForm reactive form တစ်ခု ဆောက်ပြီး email field မှာ Validators.email, password field မှာ Validators.minLength(6) ထည့်ပါ — invalid ဖြစ်ရင် error message ကို template မှာ ပြပါ။ (3) HttpClient နဲ့ public API (ဥပမာ JSONPlaceholder) ကနေ user list ကို fetch လုပ်ပြီး RxJS `map` operator သုံးပြီး name field တွေကိုပဲ array အနေနဲ့ ဖယ်ထုတ်ကာ `filter` operator နဲ့ character 5 လုံးထက်ရှည်တဲ့ name တွေပဲ ပြပါ။

• BehaviorSubject အခြေခံ CounterService ကို component နှစ်ခုကြားမှာ share and sync လုပ်နိုင်ပြီ
• Reactive form validation (email, minLength) ကို error message ဖြင့် ပြသနိုင်ပြီ
• HttpClient data ကို map/filter RxJS operators ဖြင့် transform လုပ်နိုင်ပြီ

Code နမူနာ

// counter.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class CounterService {
  private countSubject = new BehaviorSubject<number>(0);
  count$ = this.countSubject.asObservable();

  increment() { this.countSubject.next(this.countSubject.value + 1); }
  decrement() { this.countSubject.next(this.countSubject.value - 1); }
  reset() { this.countSubject.next(0); }
}

// user-list.component.ts (task 3 skeleton)
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, filter } from 'rxjs/operators';

interface User { name: string; }

@Component({ selector: 'app-user-list', template: `<li *ngFor="let n of names$ | async">{{ n }}</li>` })
export class UserListComponent implements OnInit {
  names$ = this.http.get<User[]>('https://jsonplaceholder.typicode.com/users').pipe(
    map(users => users.map(u => u.name)),
    map(names => names.filter(n => n.length > 5))
  );

  constructor(private http: HttpClient) {}
  ngOnInit() {}
}

Counter service ကို component နှစ်ခုက share သုံးရင် တစ်ခုမှာ increment နှိပ်တာနဲ့ တခြား component ရဲ့ display ပါ ချက်ချင်းပြောင်းသွားမှာဖြစ်ပြီး signup form မှာ invalid input ရိုက်ရင် error message ချက်ချင်းပေါ်ကာ user list မှာ character 5 လုံးထက်ရှည်တဲ့ name တွေပဲ ကျန်ပြသည်။