Form control လုပ်နိုင်ဖို့ ဒုတိယနည်းလမ်းဖြစ်တဲ့ Reactive Form ကိုလေ့လာရပါမယ်။ Reactive Form ဆိုတာ TypeScript ဘက်ကနေ Form ကိုအပြည့်အဝ ထိန်းချုပ်ပြီး Template နဲ့ sync လုပ်ပေးတဲ့နည်း ဖြစ်ပါတယ်။

အသုံးပြုဖို့အတွက် ReactiveFormsModule ကို AppModule မှာ import လုပ်ပေးထားဖို့လိုအပ်ပါတယ်။

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [ ReactiveFormsModule ]
...
})
export class AppModule {}

ReactiveFormComponent ကို generate လုပ်ပြီးအောက်ပါ code တွေကိုရေးပါ။

HTML
<form>
  <div class="form-group">
    <label>Username</label>
    <input type="text" class="form-control" />
  </div>
  <div class="form-group">
    <label>Mail</label>
    <input type="email" class="form-control" />
  </div>
  <div class="form-group">
    <label>Secret Questions</label>
    <select class="form-control">
      <option value="pet">Your first pet?</option>
      <option value="teacher">Your first teacher?</option>
    </select>
  </div><div class="radio" *ngFor="let gender of genders">
    <label>
      <input type="radio" [value]="gender" name="gender" />
      {{ gender }}
    </label>
  </div>
  <br />
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

TypeScript
genders = ['male', 'female'];

အခုလိုရလဒ် မျိုးရလာမှာပါ။

Reactive Form သည် TypeScript ကနေ control လုပ်တာဖြစ်လို့ အောက်ပါအတိုင်း FormGroup ကိုအရင် initialize လုပ်ထားဖို့ လိုအပ်ပါတယ်။

signupForm!: FormGroup;

ngOnInit() {
    this.signupForm = new FormGroup({
      username: new FormControl(null),
      email: new FormControl(null),
      secret: new FormControl('pet'),
      gender: new FormControl('male'),
    });
 }

FormGroup ဆိုတာ form ကို control လုပ်မဲ့ FormControl တွေစုစည်းထားတဲ့ obj ဖြစ်ပါတယ်။ ဒါကြောင့် အဲ့ဒီထဲမှာ အသုံးပြုချင်တဲ့ FormControl တွေကို ကြိုတင် သတ်မှတ်ထားတာ တွေ့နိုင်ပါတယ်။

FormControl ရဲ့ first parameter မှာ input field အတွက် initialize value ကိုသတ်မှတ်နိုင်ပါတယ်။

ပြီးရင်တော့ သတ်မှတ်လိုက်တဲ့ FormGroup ကို template နဲ့ ချိတ်ဆက်ပေးဖို့ အောက်ပါအတိုင်းရေးပါ။

<form [formGroup]="signupForm">
...
</form>

Angular ကို အလိုလျှောက် JS Obj မဆောက်ခိုင်းတော့ပဲ ကိုယ်တိုင်ဆောက်ထားတဲ့ FormGroup ကို သုံးပေးဖို့ ပြောလိုက်တာ ဖြစ်ပါတယ်။

ဆက်လက်ပြီး FormControl တွေကို input field တွေနဲ့ ချိတ်ဆက်ပေးပါ။

<input type="text" class="form-control" formControlName="username" />

<input type="email" class="form-control" formControlName="email" />

<select class="form-control" formControlName="secret">...</select>

<input type="radio" [value]="gender" name="gender"
 formControlName="gender"
/>

formControlName ဆိုတဲ့ directive နဲ့ သတ်မှတ်ခဲ့တဲ့ FormControl တွေရဲ့ နံမည်ကိုထည့်ပေးလိုက်တာ တွေ့ရမှာပါ။

ဒါဆိုရင် form နဲ့ FormGroup တို့ချိတ်ဆက်တာပြီးပါပြီ။ Submit လုပ်ရင် data ရယူဖို့အတွက် အောက်ပါအတိုင်းရေးပါ။

HTML
<form [formGroup]="signupForm" (ngSubmit)="onSubmit()">...</form>

TypeScript
onSubmit() {
    console.log(this.signupForm);
    console.log('Username: ' + this.signupForm.value.username);
    console.log('Email: ' + this.signupForm.value.email);
    console.log('Secret Question: ' + this.signupForm.value.secret);
    console.log('Gender: ' + this.signupForm.value.gender);
}

Template-Driven ကဲ့သို့ ngSubmit နဲ့ရယူလိုက်ပါတယ်။ ဒါပေမဲ့ local reference တွေတော့မလိုတော့ပါ။ Submit နှိပ်လိုက်ရင် အခုလို တွေ့ရမှာပါ။

ဒီနည်းနဲ့ အလွယ်တကူ data ရယူနိုင်မှာပဲ ဖြစ်ပါတယ်။

Form Validation

Validation သတ်မှတ်ဖို့ အခုလိုရေးပါ။

ngOnInit(): void {
    this.signupForm = new FormGroup({
      username: new FormControl(null, Validators.required),
      email: new FormControl(null, [Validators.required,   
      Validators.email]),
      ...
    });
}

FormControl ရဲ့ second parameter မှာ Validators တွေ သတ်မှတ်နိုင်ပါတယ်။ တစ်ခုထပ်ပို သတ်မှတ်ချင်ရင် [ ] နဲ့ ထည့်နိုင်ပါတယ်။

တခြား validators တွေကို ဒီမှာ လေ့လာနိုင်ပါတယ်။

ဆက်လက်ပြီး invalid data ဆိုရင် input field ကို error ဖြစ်နေကြောင်း မြင်သာအောင် ယခုလိုရေးပါ။

input.ng-touched.ng-invalid {
  border: 1px solid red;
}

Error message ပြပေးနိုင်ဖို့ အခုလို ဆက်ရေးပါ။

<span
      class="form-text"
      *ngIf="
        signupForm.get('username')!.invalid &&
        signupForm.get('username')!.touched
      "
      >Please enter a username!</span
    >

<span
      class="form-text"
      *ngIf="
        signupForm.get('email')!.invalid &&   
        signupForm.get('email')!.touched
      "
      >Please enter a valid email!</span
    >

signupForm ကနေ get() နဲ FormControl ကိုဆွဲထုတ်ပြီး property တွေထုတ်ကာ စစ်ထားတာ ဖြစ်ပါတယ်။

ဒီနည်းနဲ့အခုလို အလွယ်တကူ validation ပြုလုပ်နိုင်မှာ ဖြစ်ပါတယ်။

Submit လုပ်ပြီ form ကို reset လုပ်ချင်ရင် ယခုလို လုပ်နိုင်ပါတယ်။

onSubmit() {
this.signupForm.reset({
      secret: 'pet',
      gender: 'male',
    });
}

ဒါဆိုရင်တော့ Reactive Form ကိုသုံးပြီး form တွေကို control လုပ်နိုင်ပြီပဲ ဖြစ်ပါတယ်။

Previous: Template-Driven Form

Reactive Form was originally published in Learn Ng on Medium, where people are continuing the conversation by highlighting and responding to this story.

Form တွေ valid ဖြစ်မဖြစ် လိုချင်တဲ့ data ဟုတ်မဟုတ် စစ်ဖို့ Angular မှာ နည်းလမ်းအမျိုးမျိုးရှိပါတယ်။ အဲ့ဒီထဲက Template-Driven နဲ့ form control လုပ်နည်းကို လေ့လာကြပါမယ်။

Template-Driven Form ဆိုတာ template ထဲမှာတိုက်ရိုက် control လုပ်တဲ့ နည်းလမ်းဖြစ်ပါတယ်။ အသုံးပြုနိုင်ဖို့အတွက် FormsModule ကို AppModule ထဲမှာ အခုလို import လုပ်ပေးထားဖို့ လိုအပ်ပါတယ်။

@NgModule({
imports: [FormsModule, ...],
...
})
export class AppModule {}

အရင်ဆုံး FormDemo component ကို generate လုပ်ပြီးအောက်ပါ code တွေရေးပါ။

HTML
<form>
  <div class="form-group">
    <label>Username</label>
    <input type="text" class="form-control" />
  </div>
  <div class="form-group">
    <label>Mail</label>
    <input type="email" class="form-control" />
  </div>
  <div class="form-group">
    <label>Secret Questions</label>
    <select class="form-control">
      <option value="pet">Your first pet?</option>
      <option value="teacher">Your first teacher?</option>
    </select>
  </div>

<div class="radio" *ngFor="let gender of genders">
    <label>
      <input type="radio" [value]="gender" name="gender" />
      {{ gender }}
    </label>
  </div>
  <br />
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

TypeScript
genders = ['male', 'female'];

run လိုက်ရင် အခုလို ရလဒ်တွေ့ရမှာ ဖြစ်ပါတယ်။

Angular က <form> tag ကိုတွေ့ရင် control လုပ်နိုင်ဖို့ နောက်ကွယ်မှာ အလိုလျှောက် JS obj တစ်ခုဆောက်ပေးပါတယ်။ ဒါပေမဲ့ form ထဲက ဘယ် input field တွေကို control လုပ်ချင်လဲ ဆိုတာကတော့ ကိုယ်တိုင်သတ်မှတ်ပေးမှ ရပါမယ်။

ဒီလိုသတ်မှတ်ဖို့အတွက် control လုပ်စေချင်တဲ့ input field တွေမှာ ngModel နဲ့ name ကို ထည့်ပေးရပါမယ်။

<form>
  <div class="form-group">
    <label>Username</label>
    <input type="text" class="form-control" ngModel name="username" />
  </div>
  <div class="form-group">
    <label>Mail</label>
    <input type="email" class="form-control" ngModel name="email" />
  </div>
  <div class="form-group">
    <label>Secret Questions</label>
    <select class="form-control" ngModel name="secret">
      <option value="pet">Your first pet?</option>
      <option value="teacher">Your first teacher?</option>
    </select>
  </div>

<div class="radio" *ngFor="let gender of genders">
    <label>
      <input type="radio" [value]="gender" ngModel name="gender" />
      {{ gender }}
    </label>
  </div>
  <br />
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

အခုလို သတ်မှတ်ပြီးရင် Angular ကတည်ဆောက်ပေးထားတဲ့ JS obj ကို ရယူဖို့ပဲ ကျန်ပါတော့တယ်။ နမူနာအရ Submit button ကိုနှိပ်မယ်ဆိုရင် data ကိုရယူမှာ ဖြစ်ပါတယ်။

Data ရယူဖို့အတွက် form tag မှာအခုလိုရေးပါ။

<form (ngSubmit)="onSubmit(f)" #f="ngForm">
...
</form>

ထူးခြားချက်ကတော့ Submit button မှာ (click) event နဲ့ ရယူတာမဟုတ်ပဲ form tag မှာ (ngSubmit) နဲ့ ရယူလိုက်တာ တွေ့ရမှာပါ။ ဒီလိုရယူနိုင်ဖို့အတွက် Submit button က type=submit ပေးထားဖို့ လိုအပ်ပါတယ်။

#f ဆိုတာ local reference တစ်ခုဖြစ်ပါတယ်။ သူ့ထဲကို assign ထည့်လိုက်တာကတော့ ngForm ပါ။ ngForm ဆိုတာ Angular က အလိုလျှောက် ဆောက်ပေးထားတဲ့ JS Obj ပဲဖြစ်ပါတယ်။

ဆက်လက်ပြီး typescript ဘက်မှာ အောက်ပါအတိုင်းရေးပါ။

onSubmit(form: NgForm) {
    console.log(form);
}

Form မှာ data ဖြည့်ပြီး Submit နှိပ်လိုက်ရင် အခုလို တွေ့ရမှာဖြစ်ပါတယ်။

ရရှိလာတဲ့ Obj ထဲက value ကိုဖွင့်ကြည့်လိုက်ရင် form ထဲကဖြည့်လိုက်တဲ့ data တွေကို မြင်တွေ့ရမှာဖြစ်ပါတယ်။ ဒါ့အပြင် တခြားအသုံးဝင်တဲ့ properties တွေလည်းပါဝင်နေတာ မြင်တွေ့ရမှာပါ။ ဥပမာ valid, invalid, touched တို့ကိုသုံးပြီး form valid ဖြစ်မဖြစ် အလွယ်တကူ စစ်နိုင်မှာပါ။

Form Validation

Form validation လုပ်ဖို့အတွက် Username နဲ့ Email တို့ရဲ့ input field တွေမှာ အခုလိုရေးပါ။

<input type="text" class="form-control" ngModel name="username" required />

<input type="email" class="form-control" ngModel name="email"
required email/>

တခြားသော validators များကို ဒီမှာ လေ့လာပါ။

Form ကို ဘာ data မှမဖြည့်ပဲ Submit နှိပ်ရင် valid: false လို့ပြနေမှာ ဖြစ်ပါတယ်။ Username နဲ့ Email တို့ကို မှန်ကန်စွာဖြည့်မှ valid: trueဖြစ်စေမှာပါ။

Form ကို valid ဖြစ်မှ Submit လုပ်ခွင့်ပြုစေဖို့ အခုလို ရေးလိုက်ပါ။

<button class="btn btn-primary" type="submit" [disabled]="f.invalid"> Submit </button>

f.invalid ကိုစစ်ပြီး ရေးထားတာ ဖြစ်ပါတယ်။ ဒီနေရာမှာ !f.valid လို့သုံးချင်လည်းရပါတယ်။ ရလဒ် အနေနဲ့ data မှန်တော့မှ Submit နှိပ်လို့ရမှာ ဖြစ်ပါတယ်။

Outputting Validation Error

Field တစ်ခုဆီမှာ မှားယွင်းတဲ့ data ထည့်ရင် အသုံးပြုသူကို မှားယွင်းနေကြောင်းအသိပေးနိုင်ဖို့ အောက်ပါအဆင့်တွေ လုပ်နိုင်ပါတယ်။

Angular က Form control လုပ်ဖို့ JS Obj ဆောက်ပေးတဲ့အပြင် field တစ်ခုချင်းမှာလည်း သက်ဆိုင်ရာ css class တွေကို အလိုလျှောက် ထည့်ပေးပါသေးတယ်။

Input filed တစ်ခုကို inspect လုပ်ကြည့်ရင် အခုလို တွေ့ရမှာပါ။

မှန်ကန်တဲ့ data ထည့်လိုက်ရင် အခုလို တွေ့ရမှာပါ။

Input field တွေကို မျိုးစုံစမ်းကြည့်ပါ css class တွေပြောင်းသွားတာ တွေ့ရမှာပါ။ ဒီလိုပြောင်းသွားတာကို အသုံးချဖို့ scss file မှာ အောက်ပါအတိုင်း ရေးလိုက်ပါ။

input.ng-touched.ng-invalid {
  border: 1px solid red;
}

ဒါဆိုရင်တော့ cursor ချပြီး data အမှန်မထည့်ရင် ယခုလို ပြမှာ ဖြစ်ပါတယ်။

ဆက်လက်ပြီး သက်ဆိုင်ရာ error message ပြပေးဖို့အတွက် အောက်ပါ code တွေရေးပါ။

Username အတွက် ဒီလိုရေးပါ။

<input
      type="text"
      class="form-control"
      ngModel
      name="username"
      required
      #username="ngModel"
    />
<span class="form-text" 
      *ngIf="username.invalid && username.touched"
    >
    Please enter a username!</span>

local reference ထဲကို ngModel ထည့်လိုက်ချင်းဖြင့် field တစ်ခုချင်းဆီကို control လုပ်လို့ ရသွားစေပါတယ်။

Email အတွက်လည်း ဆင်တူပဲဖြစ်ပါတယ်။

<input
      type="email"
      class="form-control"
      ngModel
      name="email"
      required
      email
      #email="ngModel"
    />
<span class="form-text" 
      *ngIf="email.invalid && email.touched"
      >Please enter a valid email!</span>

ဒါဆိုရင်တော့ အခုလို ရလဒ်မျိုးရစေမှာပါ။

ဒီနည်းနဲ့ input field တစ်ခုချင်းဆီကို ထိန်းချုပ်နိုင်မှာ ဖြစ်ပါတယ်။

Set Default Values

အခုဆိုရင် form ရဲ့ select box နဲ့ radio button တို့မှာ default အနေနဲ့ ရွေးပေးထားတာမရှိသေးပါ။

Default သတ်မှတ်ပေးနိုင်ဖို့ အောက်ပါအတိုင်း ရေးလိုက်ပါ။

TypeScript
defaultSecret = 'pet';
defaultGender = 'male';

HTML
<select class="form-control" [ngModel]="defaultSecret" name="secret">...</select>

<input type="radio" [value]="gender" name="gender [ngModel]="defaultGender" />

ဒါဆိုရင် အခုလိုရလဒ်မျိုး ရစေမှာပါ။

Getting Form Data

ဆက်လက်ပြီး form က data တွေကို ရယူဖို့အတွက် အောက်ပါတို့ကို ရေးပါ။

onSubmit(form: NgForm) {
    console.log(form);
    console.log('Username: ' + form.value.username);
    console.log('Email: ' + form.value.email);
    console.log('Secret Question: ' + form.value.secret);
    console.log('Gender: ' + form.value.gender);
}

ဒါဆိုရင်တော့ Submit လုပ်ရင် အခုလို မြင်တွေ့ရမှာပါ။

Resetting Form Data

Submit လုပ်ပြီး form reset လုပ်ချင်ရင် အခုလို ရေးလိုက်ပါ။

onSubmit(form: NgForm) {
...
form.reset();
}

အကယ်၍ default value တွေပါ မပျက်သွားစေချင်ရင် အခုလို ရေးနိုင်ပါတယ်။

onSubmit(form: NgForm) {
...
form.reset({
      secret: this.defaultSecret, 
      gender: this.defaultGender,
});
}

ဒီလောက်ဆိုရင် Tempate-Driven form ကိုအသုံးပြုပြီး control လုပ်လို့ ရပြီပဲ ဖြစ်ပါတယ်။

Previous: Built-in Pipes

Next: Reactive Form

Template-Driven Form was originally published in Learn Ng on Medium, where people are continuing the conversation by highlighting and responding to this story.

Data တွေ user ကိုပြသရာမှာ ကြည့်ကောင်းစေဖို့ ပုံစံပြောင်းပြစေချင်ရင် Angular ရဲ့ Pipes တွေကို အသုံးပြုနိုင်ပါတယ်။

Date

Date တွေကိုထုတ်ပြတဲ့အခါ default အတိုင်းဆိုရင် ကြည့်ရတာအဆင်မပြေပါ။ အောက်ပါအတိုင်း date pipe တွေသုံးပြီး ပြစေချင်တဲ့ format အတိုင်း ပြပေးလို့ရပါတယ်။

TypeScript
myDate = new Date();

HTML
<p>Default: {{ myDate }}</p>
<p>Date with pipe: {{ myDate | date }}</p>
<p>Date with pipe: {{ myDate | date: "medium" }}</p>
<p>Date with pipe: {{ myDate | date: "MM-dd-yy" }}</p>

ရလဒ်တွေအနေနဲ့ ယခုလို တွေ့ရမှာ ဖြစ်ပါတယ်။

Date Pipe ရဲ့ အသေးစိတ်ကို ဒီမှာ ဆက်လက်လေ့လာလို့ရပါတယ်။

Text transforms

Text တွေကို ပြစေချင်တဲ့ပုံစံ ပြောင်းပြချင်ရင် သုံးနိုင်ပါတယ်။

<p>{{ "hello world" | uppercase }}</p>
<p>{{ "hello world" | lowercase }}</p>
<p>{{ "hello world" | titlecase }}</p>

ရလဒ် အနေနဲ့အခုလိုတွေ့ရမှာပါ။

Currency

<p>{{ 5000 | currency: "MMK" }}</p> 

Output: MMK 5,000

Multiple Pipes

Pipe တွေကိုတစ်ခုထက်မက ချိတ်ဆက် သုံးနိုင်ပါတယ်။

<p>{{ myDate | date: "fullDate" | uppercase }}</p>

Output: TUESDAY, OCTOBER 5, 2021

Multiple Params

Pipe တစ်ခုထဲမှာ parameter တစ်ခုထပ်မက ထည့်ပေးလို့ ရပါတယ်။

<p>{{ 5000 | currency: "EUR" : "code" }}</p>

Output: EUR5,000.00

Async Pipe

Async code တွေကို html ကနေ ခေါ်ချင်ရင် သုံးလို့ရပါတယ်။ Observable တွေကိုလည်း ခေါ်သုံးနိုင်ပါတယ်။ AppComponent မှာ အခုလို စမ်းကြည့်ပါ။

TypeScript
items = this.shopService.getProducts();

HTML
<div *ngFor="let item of items | async">
   {{ item.title }}
</div>

Async Pipe ကိုသုံးမယ်ဆိုရင် auto subscribe လုပ်ပေးပြီး auto unsubscribe လုပ်ပေးပါတယ်။ ရလဒ်အနေနဲ့ အခုလို မြင်ရမှာပါ။

ဒီလောက်ဆိုရင် pipes တွေကို အသုံးပြုနိုင်ပြီပဲ ဖြစ်ပါတယ်။ တခြား built-in pipes တွေကို ဒီမှာ ဆက်လက် လေ့လာနိုင်ပါတယ်။

Previous: Http Requests

Next: Template-Driven Form

Built-in Pipes was originally published in Learn Ng on Medium, where people are continuing the conversation by highlighting and responding to this story.

Angular project မှာ Http request တွေ ပြုလုပ်ချင်တယ်ဆိုရင် HttpClient ကိုအသုံးပြုပြီး ရေးသားနိုင်ပါတယ်။

အရင်ဦးဆုံး request တွေမရေးခင် AppModule ထဲမှာ HttpClientModule ကို import လုပ်ပေးဖို့ လိုအပ်ပါတယ်။

import { HttpClientModule } from '@angular/common/http';

@NgModule({
...

imports: [..., HttpClientModule],

})
export class AppModule {}

GET

Data တွေ တောင်းယူနိုင်ဖို့အတွက် Get request ကိုအသုံးပြုနိုင်ပါတယ်။ အရင်ဆုံး ShopService ကို generate လုပ်ပါ။ ပြီးရင် အောက်ပါအတိုင်းရေးပါ။

စမ်းသပ်ခေါ်ယူမဲ့ API တွေက Fake Store API ကနေ အသုံးပြုထားတာ ဖြစ်ပါတယ်။

export class ShopService {
  constructor(private httpClient: HttpClient) {}

getProducts(): Observable<any> {
    const url = 'https://fakestoreapi.com/products';
    const headers = new HttpHeaders({
      myData: 'Something',
    });
    const params = new HttpParams().set('limit', 5);
    return this.httpClient.get<any>(url, { headers, params });
}

Request တွေခေါ်ယူဖို့ HttpClient ကို inject လုပ်ထားပါတယ်။ get() နဲ့ GET request ပြုလုပ်နိုင်ပါတယ်။

get() ရဲ့ first param မှာ URL ကိုထည့်နိုင်ပြီး၊ second param မှာတော့ options တွေထည့်ပေးနိုင်ပါတယ်။

GET request တစ်ခုမှာအနည်းဆုံး URL ပါရင် ရပြီဖြစ်ပါတယ်။ အကယ်၍ return type သတ်မှတ်ချင်ရင်လည်း သတ်မှတ်နိုင်ပါတယ်။ နမူနာမှာတော့ get<any>() လို့သတ်မှတ်ထားပါတယ်။

Headers တွေသတ်မှတ်ချင်ရင် HttpHeaders နဲ့ သတ်မှတ်နိုင်ပါတယ်။ HttpHeaders သည် “Content-Type”: “application/json” ကို default အဖြစ် ထည့်ပေးပြီးသား ဖြစ်ပါတယ်။

Query params တွေထည့်ချင်ရင် HttpParams နဲ့ထည့်နိုင်ပါတယ်။

ဆက်လက်ပြီး AppComponent မှာအခုလိုရေးပါ။

getProducts() {
    this.shopService.getProducts().subscribe((data) => {
      console.log(data);
    });
  }

ngOnInit() {
    this.getProducts();
}

သတိပြုရန်မှာ HttpClient ကို subscribe လုပ်ပြီးသုံးရင် unsubscribe လုပ်ပေးစရာ မလိုပါ။ Angular က အလိုလျောက် လုပ်ပေးလို့ ဖြစ်ပါတယ်။

စမ်းကြည့်ရင်တော့ အခုလိုရလာမှာဖြစ်ပါတယ်။ Network tab မှာလည်း request ကိုလေ့လာနိုင်ပါတယ်။

ဒီနည်းနဲ့ GET request ကိုပြုလုပ်နိုင်မှာဖြစ်ပါတယ်။

POST

Get ကိုသိရင် post ကိုအသုံးပြုရတာ လွယ်ကူစေမှာ ဖြစ်ပါတယ်။ ShopService မှာ method တစ်ခု ထပ်ရေးပါ။

addProduct(data: any): Observable<any> {
    const url = 'https://fakestoreapi.com/products';
    return this.httpClient.post<any>(url, data);
}

post() method မှာတော့ body ကို second param မှာ ထည့်ပေးရပါတယ်။ Options တွေ ထပ်ထည့်ချင်ရင် third param မှာ ထည့်နိုင်ပါတယ်။

AppComponent မှာ အခုလိုထပ်ရေးပြီး စမ်းကြည့်ပါ။

addProduct() {
    let data = {
      title: 'Test product',
      price: 1300,
    };
    this.shopService.addProduct(data).subscribe((response) => {
      console.log(response);
    });
  }

ngOnInit() {
    this.addProduct();
}

PUT နဲ့ PATCH တို့ကလည်း POST နဲ့အတူတူပဲ ဖြစ်လို့ ကိုယ်တိုင် စမ်းသပ်ကြည့်ပါ။

POST — Data အသစ်တွေ ပေးပို့ဖို့သုံး။

PUT — Data အဟောင်းကို Data အသစ်နဲ့ အစားထိုးဖို့သုံး။

PATCH — Data အဟောင်းထဲက တစ်စိတ်တစ်ပိုင်းကိုပဲ ပြင်ဖို့သုံး။

(Reference: API လို-တို-ရှင်း)

DELETE

ShopService မှာအခုလိုရေးပါ။

deleteProduct(id: number): Observable<any> {
    const url = `https://fakestoreapi.com/products/${id}`;
    return this.httpClient.delete<any>(url);
}

AppComponent ကနေခေါ်သုံးပါ။

deleteProduct() {
    this.shopService.deleteProduct(1).subscribe((response) => {
      console.log(response);
    });
  }

ngOnInit() {
    this.deleteProduct();
}

ဒီလောက်ဆိုရင် Http requests တွေကို အလွယ်တကူ ခေါ်ယူ အသုံးပြုနိုင်ပြီပဲ ဖြစ်ပါတယ်။

Previous: Useful Built-in Observables

Next: Built-in Pipes

Http Requests was originally published in Learn Ng on Medium, where people are continuing the conversation by highlighting and responding to this story.

Subject

Event တစ်ခု ဖြစ်ပေါ်လာတိုင်း တစ်ခုခုကို လုပ်စေချင်ရင် Observable မှာ Subject ဆိုတာရှိပါတယ်။ EventEmitter နဲ့အတူတူပါပဲ Subject ကပိုကောင်းတဲ့နည်းလမ်းဖြစ်လို့ အစားထိုးသုံးသင့်ပါတယ်။

အရင်ဆုံး EventEmitter နဲ့စမ်းကြပါမယ်။ UserService ထဲမှာ အခုလိုရေးပါ။

activatedEmitter = new EventEmitter<boolean>();

UsersComponent ထဲမှာ button တစ်ခုထည့်လိုက်ပါ။

HTML
<button class="btn btn-primary" (click)="activate()">Activate Me</button>

TypeScript
activate() {
    this.userService.activatedEmitter.emit(true);
}

AppComponent ကနေ subscribe လုပ်ပြီး true ဖြစ်မှ စာပြပေးအောင် ရေးလိုက်ပါ။

HTML
<h1 *ngIf="isActivated">Activated!</h1>

TypeScript
isActivated = false;

ngOnInit() {
    this.userService.activatedEmitter.subscribe((didActivate) => {
      this.isActivated = didActivate;
    });
}

ဒါဆိုရင် button နှိပ်လိုက်တာနဲ့ AppComponent ကသိပြီး စာတန်းပြပေးမှာ ဖြစ်ပါတယ်။

ဆက်လက်ပြီး EventEmitter နေရာမှာ Subject ဘယ်လိုပြောင်းသုံးမလဲ ကြည့်ရပါမယ်။

UserService ထဲမှာအခုလိုပြင်ပါ။ EventEmitter နေရာမှာ အစားထိုးလိုက်တာ ပါပဲ။

import { Subject } from 'rxjs';

activatedEmitter = new Subject<boolean>();

UsersComponent ထဲက emitနေရာမှာ next လိုပြောင်းပေးရပါမယ်။

this.userService.activatedEmitter.next(true);

ဒီလိုပြောင်းလိုက်ယုံနဲ့ နဂိုအတိုင်း ပြန်အလုပ်လုပ်သွားမှာ ဖြစ်ပါတယ်။ Subscribe လုပ်ပြီး အသုံးပြုပြီဆိုရင် memory leak မဖြစ်စေဖို့ ngOnDestroy မှာ unsubscribe လုပ်ဖို့မမေ့ပါနဲ့။ AppComponent မှာ အခုလို ထပ်ထည့်ပါ။

sub: Subscription = new Subscription();

ngOnInit() {
    this.sub = this.userService.activatedEmitter.subscribe(...);
  }

ngOnDestroy() {
    this.sub.unsubscribe();
}

Subject က Observable ဖြစ်လို့ Operators တွေနဲ့လည်း တွဲသုံးလို့ ရသွားမှာ ဖြစ်ပါတယ်။ တစ်ခုသတိထားရမှာက @Output နဲ့သုံးတဲ့အခါ EvenEmitter ကိုသာသုံးရမှာဖြစ်ပြီး Subject ကို ပြောင်းသုံးလို့ မရပါ။

BehaviorSubject

Subject နဲ့အတူတူပါပဲ။ ဒါပေမဲ့ BehaviorSubject ရဲ့ထူးခြားချက်က subscribe မလုပ်ခင်ကပြောင်းလဲသွားခဲ့တဲ့ data ကိုရယူနိုင်ခြင်းပဲ ဖြစ်ပါတယ်။

ဆိုလိုတာက Subject သည် emit လုပ်လိုက်တဲ့ data ကိုမသိမ်းထားပါ။ ဒါကြောင့် subscribe မလုပ်ခင်က emit လုပ်လိုက်တဲ့ data ကို subscribe လုပ်သူက လက်ခံရရှိလိုက်မှာ မဟုတ်ပါ။

ဥပမာစမ်းသပ်နိုင်ဖို့ AppComponent မှာအခုလိုရေးပါ။

subject = new Subject<number>();
sub2: Subscription = new Subscription();

testSubject() {
    this.subject.next(1);
    this.sub2 = this.subject.subscribe((num) => {
      console.log('num is : ' + num);
    });
    this.subject.next(2);
}

ngOnInit() {
    this.testSubject();
}

ngOnDestroy() {
    this.sub2.unsubscribe();
}

console ကိုကြည့်လိုက်ရင် num is : 2 ပဲထွက်လာတာ တွေ့ရမှာပါ။

ဒီလိုဖြစ်ရတာက next(1) ကိုလုပ်ချိန်မှာ Subject ကို subscribe မလုပ်ရသေးတာကြောင့်ဖြစ်ပါတယ်။ next(2) လုပ်ပြီးချိန်မှာတော့ subscribe လုပ်ပြီးပြီဖြစ်လို့ log ထွက်လာတာပဲဖြစ်ပါတယ်။

ဆက်လက်ပြီး BehaviorSubject ကိုစမ်းသပ်ဖို့ AppComponent မှာပဲဆက်ပြီး အောက်ပါ code တွေရေးပါ။

behaviorSubject = new BehaviorSubject<number>(0);
sub3: Subscription = new Subscription();

testBehaviorSubject() {
    this.behaviorSubject.next(1);
    this.sub3 = this.behaviorSubject.subscribe((num) => {
      console.log('[Behaviour] num is : ' + num);
    });
    this.behaviorSubject.next(2);
}

ngOnInit() {
    this.testBehaviorSubject();
}

ngOnDestroy() {
    this.sub3.unsubscribe();
}

BehaviorSubject က initial variable တစ်ခု သတ်မှတ်ပေးဖို့ လိုတာကြောင့် 0 ထည့်ထားတာ တွေ့ရမှာပါ။ ရလဒ်ကတော့ အခုလို တွေ့ရမှာပါ။

1 ရော 2 ပါလက်ခံရရှိတာ တွေ့ရမှာ ဖြစ်ပါတယ်။ ဒါကြောင့် လက်ရှိ data ကိုလည်းလိုချင်တယ် နောက်ထပ် emit လုပ်မဲ့ data ကိုလည်းလိုချင်ရင် BehaviorSubject ကိုသုံးပါ။ လက်ရှိ data ကိုမလိုချင်ပဲ နောက်ထပ် emit လုပ်မဲ့ data အသစ်ကိုပဲ လိုချင်ရင်တော့ Subject ကို အသုံးပြုနိုင်ပါတယ်။

Prevent pushing data to Subjects

Subjects (Subject and BehaviorSubject) တွေက emit လုပ်နိုင်သလို subscribe လည်းလုပ်နိုင်ပါတယ်။ ကိုယ်ရေးထားတဲ့ Subjects ကို subscribe လုပ်ခွင့်ပဲပေးပြီး emit လုပ်ခွင့် မပေးချင်ရင် အခုလို ကာကွယ်ထားလို့ ရပါတယ်။

Subject လေ့လာတုံးက ရေးသားခဲ့တာကိုပဲ ပြုပြင်ပြီး လေ့လာကြပါမယ်။ အရင်ဆုံး UserService မှာအခုလိုပြင်ရေးပါ။

export class UserService {
  private activatedEmitter = new Subject<boolean>();
  activateObservable = this.activatedEmitter.asObservable();

  doActivate() {
      this.activatedEmitter.next(true);
  }

...
}

နဂိုရေးသားခဲ့တဲ့ Subject ကို private လုပ်လိုက်ပါတယ်။ ဒါကြောင့် service ပြင်ပက access လုပ်လို့ရတော့မှာ မဟုတ်ပါ။ Subject ကို asObservable() သုံးပြီး Observable တစ်ခုအနေနဲ့ ပြောင်းယူလိုက်ပါတယ်။ ဒါကြောင့် ခေါ်သုံးမဲ့သူတွေဟာ activateObservable ကိုပြောင်းခေါ်ပေးရမှာ ဖြစ်သလို subscribe ပဲလုပ်လို့ရတော့မှာလည်း ဖြစ်ပါတယ်။ ဒါကြောင့် emit လုပ်ဖို့အတွက် service ထဲမှာပဲ method တစ်ခုနဲ့ရေးထားလိုက်တာ ဖြစ်ပါတယ်။

ဆက်လက်ပြီး UsersComponent မှာအခုလို ပြင်ပေးပါ။

activate() {
    this.userService.doActivate();
}

ပြီးရင်တော့ AppComponent မှာ အောက်ပါအတိုင်း activatedObservable ကို ပြောင်းခေါ်လိုက်ပါ။

ngOnInit() {
   this.sub = this.userService.activateObservable.subscribe();
   ...
}

ရလဒ်ကတော့ အတူတူပဲဖြစ်ပေမဲ့ Subject ကိုတိုက်ရိုက် access လုပ်တာ မဟုတ်တော့ပဲ Observable ကနေသာ access လုပ်ရတော့တာ ဖြစ်လို့ မှားယွင်းပြီး next() ခေါ်မိမှာတွေကို ကာကွယ်ပြီးသား ဖြစ်သွားပါတယ်။

Of

Argument တွေကို observable sequence အဖြစ် ပြောင်းလဲပေးတာ ဖြစ်ပါတယ်။ AppComponent မှာ အခုလို စမ်းနိုင်ပါတယ်။

ngOnInit() {
  of('A', 'B', 'C', 'D').subscribe((data) => console.log(data));
  of([1, 2, 3]).subscribe((data) => console.log(data));
}

ရလဒ်အနေနဲ့ အခုလို ထွက်လာမှာ ဖြစ်ပါတယ်။ argument တစ်ခုကို emit တစ်ခါလုပ်ပေးတာ တွေ့ရမှာပါ။

From

Observable မဟုတ်တာကို Observable အဖြစ် convert လုပ်ပေးပါတယ်။ Promise ကို Observable ပြောင်းရာမှာ အသုံးများပါတယ်။

ngOnInit() {
  from([1, 2, 3]).subscribe((data) => console.log(data));

  let asyncTask = new Promise((resolve, reject) => resolve('Hi'));
  from(asyncTask).subscribe((data) => console.log(data));
}

ရလဒ်အနေနဲ့ အခုလို ထွက်လာမှာ ဖြစ်ပါတယ်။ Array ကိုထည့်ပေးလိုက်တဲ့အခါ of နဲ့မတူတဲ့ ရလဒ်ကို ထုတ်ပေးတာ သတိပြုပေးပါ။

Previous: Operators

Next: Http Requests

Useful Built-in Observables was originally published in Learn Ng on Medium, where people are continuing the conversation by highlighting and responding to this story.

Observable ကနေရရှိလာတဲ့ data ကို တန်းလက်မခံပဲ လိုချင်တဲ့ပုံစံ ပြောင်းပြီးမှ ရယူချင်တယ်ဆိုရင် Operators တွေကို အသုံးပြုနိုင်ပါတယ်။

Filter

Operators ရဲ့ အသုံးဝင်ပုံကို မြင်သာစေဖို့အတွက် အခုလို ရေးကြပါမယ်။ HomeComponent ရဲ့ ngOnInit() မှာ အခုလိုထပ်ရေးပါ။

Operators တွေအသုံးပြုဖို့အတွက် pipe() ကိုသုံးရပါတယ်။ subscribe() ရဲ့ရှေ့မှာရေးပေးရပါတယ်။ pipe() ထဲမှာအသုံးပြုချင်တဲ့ operators တွေကို rxjs/operators ကနေ import လုပ်ပေးဖို့လိုပါတယ်။ အခုက filter ကိုသုံးမှာဖြစ်လို့ အခုလို import လုပ်ပေးပါ။

filter ထဲမှာတော့ count 0 မဖြစ်တာပဲ ပေးဖို့ရေးထားပါတယ်။ ဒါကြောင့် ပြန်စမ်းကြည့်ရင် 0 မပါတော့ပဲ 1 ကနေပဲစတော့မှာ ဖြစ်ပါတယ်။

Map

pipe() မှာ တစ်ခုထပ်မက operator တွေကို ရေးသားနိုင်ပါတယ်။ လက်တွေ့ လုပ်ကြည့်နိုင်ဖို့အတွက် အခုလို ထပ်ရေးပါ။

import ကိုတော့ အခုလိုရေးပါ။

ခုရေးလိုက်တာကတော့ filter လုပ်လို့ရလာတဲ့ data ကိုမှ map နဲ့ပြုပြင်လိုက်တာ ဖြစ်ပါတယ်။ ရလဒ်အနေနဲ့ အခုလို ဖြစ်သွားမှာ ဖြစ်ပါတယ်။

ဒီလိုမျိုး operators တွေကို အသုံးပြုပြီး ကိုယ်လိုချင်တဲ့ ပုံစံဖြစ်အောင် ပြောင်းလဲရယူနိုင်မှာ ဖြစ်ပါတယ်။

Tap

Pipe ထဲမှာ လက်ခံရရှိတဲ့ data ကို log ထုတ်ကြည့်ချင်တဲ့အခါ၊ ဒါမှမဟုတ် operators တွေသုံးပြီး data ကို ပြုပြင်လိုက်ရင် ဘယ်လိုပုံစံ ထွက်လာလဲ စစ်ချင်တဲ့အခါ အသုံးပြုနိုင်ပါတယ်။

နမူနာမှာဆိုရင် မပြုပြင်ရသေးတဲ့ data နဲ့ ပြုပြင်ပြီး data ကို log ထုတ်ထားတာ တွေ့ရမှာပါ။ ဒီနည်းနဲ့ အလွယ်တကူ debug လုပ်နိုင်ပါတယ်။

Take

Observable မှ emit ဘယ်နှကြိမ်ထိ ယူမယ်ဆိုတာ သတ်မှတ်ဖို့ သုံးပါတယ်။ ဥပမာ customInterval မှ emit ၃ ကြိမ်ထိပဲ ယူမယ်ဆိုရင် အခုလို ရေးနိုင်ပါတယ်။

CatchError

Observable က error emit လုပ်လိုက်ရင် တခြား observable ကို ပြောင်းခေါ်စေချင်ရင်ဖြစ်စေ၊ retry ပြန်လုပ်စေချင်ရင်ဖြစ်စေ၊ error ကို ပုံစံပြောင်းချင်ရင် ဖြစ်စေ သုံးနိုင်ပါတယ်။

တခြား Observable သို့ ပြောင်းခေါ်ပေးခြင်း

Error တက်ရင် interval() ကို ပြောင်းခေါ်လိုက်တာ ဖြစ်ပါတယ်။ take(10) ဖြစ်လို့ total 10 ကြိမ်ပဲ emit လုပ်စေပါတယ်။

Error ဖြစ်ရင် retry ပြန်လုပ်စေခြင်း

Second parameter ကို return ပြန်လိုက်ရင် observable ကို ပြန်ခေါ်ပေးစေပါတယ်။

Console မှာ ကြည့်ရင် အခုလို တွေ့ရမှာပါ။

Error လက်ခံပြီး error အသစ်တစ်ခု ထုတ်ပေးခြင်း

အခုလိုမျိုး error အသစ်ပြောင်းပြီး ထုတ်ပေးလို့လည်းရတယ်။ subscribe ထဲက error handler ထဲမှာ error.message ကို error လို့ပဲထားလိုက်ပါ။

ဒါဆိုရင်အခုလို error message ပြောင်းသွားတာ တွေ့ရမှာပါ။

ExhaustMap

Observable တစ်ခုက emit လုပ်လိုက်တဲ့ data ကိုသုံးပြီး တခြား observable ကိုခေါ်ချင်ရင် သုံးနိုင်ပါတယ်။ HomeComponent မှာပဲ method တစ်ခု ထပ်ရေးပြီး ngOnInit ကခေါ်ပေးလိုက်ပါ။

ဒီမှာဆိုရင် customInterval က emit တစ်ခါလုပ်ရင် interval ဆီက emit ၃ ခါယူဖို့ရေးထားတာတွေ့ရမှာပါ။ ရလဒ်အနေနဲ့အခုလိုထွက်လာပါတယ်။

သတိထားရမှာကတော့ exhaustMap သည် သူ့ထဲက observable ကို complete ဖြစ်သည်ထိ စောင့်ပါတယ်။ complete မဖြစ်မချင်း အပြင်က ထပ်ဝင်လာတဲ့ data အသစ်ကို လက်ခံမှာမဟုတ်ပါ။

ဒါကြောင့် Form တွေကို submit လုပ်တဲ့အခါ user က submit button ကိုအကြိမ်ကြိမ်နှိပ်လို့ http request တွေ အများကြီး ထွက်သွားမှာကို ကာကွယ်ချင်တဲ့အခါ exhaustMap ကို အသုံးပြုလို့ ရပါတယ်။

RxJS မှာ build-in operators များစွာရှိပါတယ်။ အသေးစိတ်လေ့လာလိုပါက အောက်ပါတို့မှာ လေ့လာပါ။

• Introduction | Learn RxJS
• Understanding RxJS
• RxJS 6 - What Changed?

Previous: Working with Custom Observable

Next: Useful Built-in Observables

Operators was originally published in Learn Ng on Medium, where people are continuing the conversation by highlighting and responding to this story.

Building a Custom Observable

Observable အသုံးပြုပုံကို interval() method နဲ့စမ်းသပ် လေ့လာခဲ့ပြီး ဖြစ်ပါတယ်။ ဒီတစ်ခါမှာတော့ ကိုယ်ပိုင် Observable method တစ်ခုကို ဘယ်လိုရေးသားရမလဲဆိုတာ လေ့လာရမှာပါ။

HomeComponent မှာ အခုလို ရေးလိုက်ပါ။ interval() ကိုပဲ ကိုယ်တိုင် custom method ရေးလိုက်တာ ဖြစ်ပါတယ်။

customInterval() {
    return new Observable((observer) => {
      let count = 0;
      setInterval(() => {
        observer.next(count);
        count++;
      }, 1000);
    });
 }

Observable တစ်ခုကို new နဲ့အခုလို ဆောက်ရပါတယ်။ rxjs ကနေ import လုပ်ပေးဖို့မမေ့ပါနဲ့။ callback function ထဲမှာ code တစ်ချို့ရေးပြီး observer အတွက် လိုအပ်တဲ့ data ထုတ်ပေးဖို့ observer.next() နဲ့ emit လုပ်လိုက်ပါတယ်။

ဒီလိုထုတ်ပေးရာမှာ next(), error(), complete() ဆိုပြီး ၃ မျိုးရှိပါတယ်။

next() က data emit လုပ်ဖို့သုံးပါတယ်။

error() က error ဖြစ်ကြောင်း emit လုပ်ဖို့သုံးပါတယ်။ error ဖြစ်သွားရင် emit လုပ်တာ လုံးဝ ရပ်သွားမှာဖြစ်ပါတယ်။ ဆက် emit လို့ မရတော့ပါ။

complete() ကတော့ data emit လုပ်ခြင်း ပြီးဆုံးကြောင်း data ထပ် emit လုပ်မှာမဟုတ်တော့ကြောင်း ပြောဖို့အတွက် သုံးပါတယ်။

ခေါ်သုံးဖို့ကတော့ ngOnInit() မှာ အခုလို ရေးလိုက်ပါ။

ngOnInit(): void {
    // this.firstSub = interval(1000).subscribe((count: number) => {
    //   console.log(count);
    // });

    this.firstSub = this.customInterval().subscribe((count) => {
          console.log(count);
    });
}

အရင် interval() သုံးခဲ့တာကို comment ပိတ်လိုက်ပြီး customInterval() ကိုပြောင်းခေါ်လိုက်ပါ။ ပြီးရင်တော့ ပြန်စမ်းကြည့်ရင် အရင်အတိုင်းဆက်ပြီး အလုပ်လုပ်နေတာကို တွေ့ရမှာပါ။

ဒါပေမဲ့ ဒီတစ်ခါကတော့ ကိုယ်တိုင်ရေးသားထားတဲ့ Observable နဲ့ အသုံးပြုလိုက်ခြင်းပဲဖြစ်ပါတယ်။

Errors and Completion

Observable ကနေnext() နဲ့ data emit လုပ်နိုင်ကြောင်း သိပြီးတဲ့နောက် error နဲ့ completion တွေကိုဘယ်လို emit လုပ်ပြီး ဘယ်လို handle လုပ်မလဲဆိုတာ ဆက်လေ့လာရပါမယ်။

အရင်ဆုံး error emit လုပ်ခြင်းနဲ့ handle လုပ်ခြင်းကို စမ်းသပ်ပါမယ်။

customInterval() ရဲ့ setInterval() ထဲမှာ အခုလို ထပ်ထည့်ပါ။

setInterval(() => {
  if (count > 3) 
    observer.error(new Error('Count is greater than 3!'));
  observer.next(count);
  count++;
}, 1000);

count 3 ထပ်ကျော်သွားရင် error emit လုပ်လိုက်တာပါ။ သတိထားရမှာကတော့ error emit လုပ်လိုက်ရင် observable ရပ်သွားပြီး emit ဆက်လုပ်လို့ရမှာ မဟုတ်တော့ပါ။

error ကို handle လုပ်ဖို့ကတော့ ngOnInit() ထဲမှာ အခုလို ပြင်လိုက်ပါ။

this.firstSub = this.customInterval().subscribe(
      (count) => {
        console.log(count);
      },
      (error) => {
        alert(error.message);
      }
);

subscribe() ရဲ့ second param အနေနဲ့ error ကိုလက်ခံလိုက်ပြီး handle လုပ်လိုက်တာ တွေ့ရမှာပါ။

ပြန်စမ်းကြည့်ရင်တော့ count 3 ကျော်သွားရင် အခုလို တွေ့ရမှာပါ။

Completion စမ်းဖို့အတွက် setInterval() အပေါ်နားလေးမှာ အခုလို ရေးလိုက်ပါ။

setInterval(() => {
    if (count == 2) observer.complete();
...

count 2 ဖြစ်ရင် ဆက် emit မလုပ်တော့ဖို့အတွက် complete() ခေါ်လိုက်တာဖြစ်ပါတယ်။ complete ဖြစ်သွားရင် observable လုံးဝ ရပ်သွားမှာ ဖြစ်ပါတယ်။ အကယ်၍ complete မခေါ်ခင် error တက်သွားရင် complete ကိုဆက်မခေါ်ပေးပါ။

complete ဖြစ်သွားပြီးမှ လုပ်စေချင်တဲ့ code တွေရှိရင်အခုလို handle လုပ်နိုင်ပါတယ်။ ngOnInit() ထဲမှာအခုလိုရေးပါ။

this.firstSub = this.customInterval().subscribe(
      (count) => {
        console.log(count);
      },
      (error) => {
        alert(error.message);
      },
      () => {
        console.log('Completed!');
      }
 );

subscribe() ရဲ့ third param အနေနဲ့ complete ကိုလက်ခံရရှိပြီး handle လုပ်လိုက်ပါတယ်။ complete က data မပါတဲ့အတွက် no argument အနေနဲ့ ရေးထားတာကို တွေ့ရမှာပါ။

ပြန်စမ်းကြည့်ရင်တော့ ဒီလိုတွေ့ရမှာပါ။

ဒီနည်းတွေနဲ့ Observable တစ်ခုကို လိုအပ်သလို emit လုပ်နိုင် handle လုပ်နိုင်မှာ ဖြစ်ပါတယ်။

Previous: Observable

Next: Operators

Working with Custom Observable was originally published in Learn Ng on Medium, where people are continuing the conversation by highlighting and responding to this story.

What is an Observable?

Observable ဆိုတာ data source တစ်ခုပါပဲ၊ ဥပမာအားဖြင့် user ဆီက event တွေ Http requests တွေနဲ့ ကိုယ်တိုင်ရေးသားထားတဲ့ code တွေကနေ ရရှိလာတဲ့ data တွေကို တစ်ကြိမ်ထပ်မက ထုတ်လွှင့်ပေးနိုင်တဲ့ စနစ်တစ်ခုပဲ ဖြစ်ပါတယ်။

ထုတ်လွှင့်လိုက်တဲ့ data တွေကို လက်ခံရယူလိုသူ (Observer) တွေက subscribe လုပ်ထားချင်းဖြင့် ရယူနိုင်ပါတယ်။

Observable ကနေ data တွေအပြင် error နဲ့ ထုတ်လွှင့်မှုပြီးဆုံးကြောင်း (completion) တွေပါ ထုတ်လွှင့်နိုင်တာကြောင့် subscribe လုပ်ထားသူတွေက ရရှိလာတဲ့ ထုတ်လွှင့်မှုအပေါ်မူတည်ပြီး လိုသလို အသုံးချနိုင်မှာ ဖြစ်ပါတယ်။

Angular က RxJS ရဲ့ Observer pattern ကိုအသုံးပြုထားတာကြောင့် အသေးစိတ်လေ့လာလိုပါက ဒီမှာ လေ့လာနိုင်ပါတယ်။

Using Observable

Observable တချို့ကိုရှေ့မှာ အသုံးပြုခဲ့ကြပါတယ်။ ဥပမာအားဖြင့် route ရဲ့ params ပါ။ အောက်ပါ code ကိုကြည့်ရင် မှတ်မိမှာပါ။

လက်တွေ့မြင်နိုင်စေဖို့အတွက် Observable တစ်ခုကို အခုလို အသုံးပြုကြပါမယ်။ HomeComponent ကိုဖွင့်ပြီး အခုလိုရေးပါ။

import { interval } from 'rxjs';

ngOnInit() {
    interval(1000).subscribe((count: number) => {
      console.log(count);
    });
}

interval ဆိုတာ Observable တစ်ခုဖြစ်ပါတယ်။ rxjs ကနေ import လုပ်ပေးဖို့လိုအပ်ပါတယ်။ interval ကို subscribe လုပ်လိုက်ပြီးရလာတဲ့ data ကို log ထုတ်ထားပါတယ်။

အားလုံးပြီးရင်တော့ run လိုက်ပါ။ home tab ကိုနှိပ်လိုက်ရင် console မှာ count တွေထွက်လာတာ တွေ့ရမှာပါ။

Home tab ကနေတခြား tab တစ်ခုကို နှိပ်ကြည့်ပါ။

count တွေဆက်ပြီးသွားနေတာ တွေ့ရမှာပါ။ ဘာဖြစ်လို့လဲဆိုတော့ observable တွေကို subscribe လုပ်လိုက်ရင် component မရှိတော့လည်း ဆက်ပြီးတော့ subscribe လုပ်ပေးနေလို့ပဲဖြစ်ပါတယ်။

ဒါကြောင့် component မရှိတော့တဲ့အခါ subscribe လုပ်ထားတာကိုရပ်ဖို့ အခုလိုပြင်ရေးပါ။

import { interval, Subscription } from 'rxjs';

firstSub: Subscription = new Subscription();

ngOnInit(): void {
    this.firstSub = interval(1000).subscribe((count: number) => {
      console.log(count);
    });
  }

ngOnDestroy() {
    this.firstSub.unsubscribe();
}

Component destroy လုပ်ရင် subscribe လုပ်ထားတာကို unsubscribe လုပ်ပေးဖို့ပြောထားတာပါ။ ဒါဆိုရင်ပြန်စမ်းကြည့်ပါ။ Home tab ကနေတခြား tab ကိုရောက်သွားတဲ့အခါ count ထုတ်ရပ်သွားတာတွေ့ရမှာ ဖြစ်ပါတယ်။

ဒါကြောင့် observable တွေကို အသုံးပြုမယ်ဆိုရင် အမြဲတမ်း unsubscribe လုပ်ပေးဖို့လိုအပ်မှာ ဖြစ်ပါတယ်။

ဒါပေမဲ့ Angular က အသုံးပြုထားတဲ့ observable တွေ ဥပမာ params တို့ httpClient တို့ကတော့ Angular ကအလိုလျှောက် unsubscribe လုပ်ပေးတာဖြစ်လို့ ကိုယ်တိုင်လုပ်ပေးဖို့ မလိုပါဘူး။

Previous: More in Routing

Next: Working with Custom Observable

Observable was originally published in Learn Ng on Medium, where people are continuing the conversation by highlighting and responding to this story.

JavaScript နဲ့ code တွေရေးတဲ့အခါ တခါတလေ data type နဲ့ပတ်သက်ပြီး ကိုယ်ထင်ထားတဲ့အတိုင်း ဖြစ်မလာတာတွေ ဒါမှမဟုတ် ဘာဖြစ်နေမှန်းမသိ လိုချင်တဲ့အဖြေရမလာတာမျိုးတွေ ရှိနိုင်ပါတယ်။

ဒါကြောင့် ဒီ article မှာ JavaScript ရဲ့ primitive type နဲ့ reference type တွေမတူညီပုံ၊ memory မှာနေရာယူပုံတို့ကို နားလည်လွယ်အောင် ရှင်းပြမှာဖြစ်ပါတယ်။

Primitive Type တွေကတော့ boolean, number, string, undefined, null, symbol(ES6) တို့ဖြစ်ပါတယ်။

Reference Type တွေကတော့ Object, Array နဲ့ Function တို့ဖြစ်ပါတယ်။

Primitive Types

ပထမဆုံး primitive type တွေအလုပ်လုပ်ပုံကို ကြည့်ကြပါမယ်။ အောက်ပါ code ကိုကြည့်ပါ။

let a = "Hello";

ဒီလိုရေးလိုက်ရင် memory မှာ အခုလို နေရာယူသွားမှာ ဖြစ်ပါတယ်။

Value တွေထားဖို့ memory ပေါ်မှာ Stack နဲ့ Heap နှစ်ခုရှိတဲ့ထဲကမှ primitive type တွေကတော့ Stack ပေါ်မှာ နေရာယူပါတယ်။

အောက်ပါ code ကို ထပ်မံရေးလိုက်မယ် ဆိုရင်တော့…

let b = a;

b ထဲ a ကို assign လုပ်လိုက်ပါတယ်။ ဒါကြောင့် a ထဲက “Hello” value ကို b ထဲထည့်ပေးလိုက်ပြီး memory မှာ အခုလို နေရာယူသွားမှာ ဖြစ်ပါတယ်။

အကယ်၍ a ရဲ့ value ကို ဒီလိုပြောင်းလိုက်မယ်ဆိုရင် b ရဲ့ value က ဘာဖြစ်သွားမလဲ?

a = "Hi";

a ရဲ့ value ပြောင်းလိုက်တာကြောင့် Stack ပေါ်မှာ နောက်ထပ်နေရာ တစ်ခုထပ်ယူပြီး value အသစ်ထည့်လိုက်တာ တွေ့ရမှာပါ။ နဂို value အဟောင်းကတော့ point လုပ်တော့မှာ မဟုတ်တဲ့အတွက် ပျက်ပြယ်သွားမှာ ဖြစ်ပါတယ်။ b ကတော့ နဂိုအတိုင်းသာဆက်ရှိနေတာကြောင့် b ရဲ့ value သည် “Hello” ပဲ ဆက်ဖြစ်နေမှာ ဖြစ်ပါတယ်။

ဒီအတိုင်းပဲ b value ပြောင်းရင်လည်း အခုလို နေရာယူသွားမှာ ဖြစ်ပါတယ်။

တခြား primitive type တွေလည်း ဒီလိုပုံစံနဲ့ပဲ အလုပ်လုပ်ပါတယ်။

Objects

Reference type တစ်ခုဖြစ်တဲ့ object အလုပ်လုပ်ပုံကတော့ primitive type တွေနဲ့ကွဲပြားပါတယ်။ အောက်ပါ code ကိုကြည့်ပါ။

let a = { name: "Mg Mg"};

Memory မှာအခုလို နေရာယူပေးပါတယ်။

Object တစ်ခုကို a ထဲထည့်တဲ့အခါ Stack ပေါ်မှာ Object ရဲ့ တည်နေရာဖြစ်တဲ့ memory address ကိုသိမ်းလိုက်ပါတယ်။ Object တွေက Heap ပေါ်မှာ ထားရတာဖြစ်လို့ ပုံပါအတိုင်း Heap ထဲမှာ သိမ်းလိုက်ပါတယ်။

ဒီနေရာမှာ သတိထားရမှာကတော့ primitive တုန်းက stack ပေါ်မှာ value ကိုတိုက်ရိုက်သိမ်းပေမဲ့ ဒီမှာကတော့ value အဖြစ် obj ရဲ့ address ကိုသာသိမ်းတာ ဖြစ်ပါတယ်။

ဆက်လက်ပြီး အခုလိုရေးမယ်ဆိုရင်တော့…

let b = a;

b ထဲ a ကို assign လုပ်တဲ့အခါ a ရဲ့ value ဖြစ်တဲ့ address ကိုသာပေးလိုက်ပါတယ်။ Obj ပေးတာမဟုတ်ပါဘူး။

ဒါကြောင့် b က Stack ပေါ်မှာနေရာတစ်ခုယူပြီး obj ရဲ့ address ကိုမှတ်လိုက်ပါတယ်။ မှတ်လိုက်တဲ့ address က a နဲ့အတူတူပဲဖြစ်တာကြောင့် Heap ထဲက a ညွှန်ထားတဲ့ obj ကိုပဲ လှမ်းညွှန်လိုက်မှာ ဖြစ်ပါတယ်။

အကယ်၍ a ကအခုလို ပြောင်းလဲလိုက်ရင် b ပါလိုက်ပြောင်းမလား?

a.name = "Su Su";

Heap ထဲက obj ရဲ့ name property ကိုပြောင်းလိုက်တာဖြစ်ပါတယ်။ b ကလည်း အဲ့ဒီ obj ကိုပဲထောက်ထားတာ ဖြစ်တဲ့အတွက် b ပါ လိုက်ပြောင်းသွားမှာ ဖြစ်ပါတယ်။

ဒါဆိုရင် ဒီလိုရေးရင်ရော b လိုက်ပြောင်းမှာလား?

a = { name: "Htoo" };

Obj အသစ်တစ်ခုကို a ထဲ assign လုပ်လိုက်တာကြောင့် Heap ပေါ်မှာ Obj ကိုသိမ်းပြီး ထို obj ရဲ့ address ကို Stack ပေါ်မှာသိမ်းလိုက်တာတွေ့ရမှာပါ။ အရင် address အဟောင်းကတော့ ပျက်ပြယ်သွားမှာဖြစ်ပါတယ်။ ပုံအရဆိုရင် a နဲ့ b ကသီးခြားစီဖြစ်သွားတဲ့အတွက် a ရဲ့ပြောင်းလဲမှုကို b ကသိတော့မှာမဟုတ်ပါ။

ဒီ သဘောတရားက a မှမဟုတ်ပါဘူး b ကို b = { name: “Htoo”} ရေးရင်လည်းဒီလိုပဲ အလုပ်လုပ်ပေးမှာ ဖြစ်ပါတယ်။ ကိုယ်တိုင်စမ်းသပ်ကြည့်ပါ။

Objects with Arrays

Object ထဲမှာ array တွေနဲ့ တခြားသော object တွေပါတတ်ပါတယ်။ ဒီလိုပါလာခဲ့ရင် ဘယ်လိုအလုပ်လုပ်လဲ ဆိုတာ ဆက်ကြည့်ရအောင်ပါ။

အောက်ပါ code ကိုကြည့်ပါ။

let a = { 
      name: "Mg Mg",
      hobbies: ["Sports"]
    }

let b = a;

Obj ထဲမှာ array တစ်ခုပါလာတဲ့အတွက် Heap ပေါ်မှာ array ကိုသိမ်းလိုက်ပြီး အဲ့ array ရဲ့ address ကိုတော့ obj ထဲမှာ မှတ်ထားလိုက်တာကို တွေ့ရမှာပါ။ ကျန်တာကတော့ သိပြီးသားတွေပါ။

a ကအခုလိုပြောင်းလဲလိုက်ရင် b ပါလိုက်ပြောင်းလဲမလား?

a.hobbies = ["Cooking"];

array ကိုပဲပြောင်းလိုက်တာမလို့ Heap ပေါ်မှာအသစ်ထပ်သိမ်းလိုက်တဲ့ address ကိုပြောင်းမှတ်လိုက်ပါတယ်။ b ကကြည့်မယ်ဆိုရင် ပြောင်းလဲသွားတဲ့ address ကိုမြင်နေရတာမလို့ b ပါ လိုက်ပြောင်းသွားမှာ ဖြစ်ပါတယ်။

Array အပြင် object တွေပါလာခဲ့ရင်လည်း ဒီလိုပဲအလုပ်လုပ်ပေးမှာ ဖြစ်ပါတယ်။

Arrays

Array တွေရဲ့အလုပ်လုပ်ပုံကို ဆက်လေ့လာရအောင်ပါ။ Array ကလည်း object type ပဲဖြစ်တဲ့အတွက် အလုပ်လုပ်ပုံတွေ အတူတူပဲဖြစ်နေမှာပါ။

let a = [1, 2, 3];

ဒီလိုရေးရင် memory မှာ အခုလို a နေရာယူပေးပါတယ်။

Object တုံကလိုပဲ Heap ပေါ်မှာ array ကိုသိမ်းပြီး address ကိုတော့ stack မှာမှတ်လိုက်ပါတယ်။ ဆက်လက်ပြီး …

let b = a;

b က a ရဲ့ address ကိုရယူလိုက်ပြီး တူညီတဲ့ array ကိုပဲ point လုပ်လိုက်ပါတယ်။

အခုလိုရေးရင် b ကပြောင်းလဲမှာလား?

a.push(4);

push() လုပ်လိုက်တာကြောင့် Heap ထဲက array မှာသွားပြင်လိုက်ပါတယ်။ b ကလည်း ဒီ array ကိုပဲ point လုပ်ထားတာမလို့ b ပါ လိုက်ပြောင်းသွားမှာ ဖြစ်ပါတယ်။

ဒီလိုရေးရင်ရော b လိုက်ပြောင်းမှာလား?

a = [100];

a ထဲကို array အသစ်ထည့်လိုက်တာဖြစ်လို့ Heap မှာ ထို array အသစ်ကိုသိမ်းလိုက်ပါတယ်။ ပြီးတော့ stack ပေါ်မှာ ထို array ရဲ့ address ကိုမှတ်လိုက်ပါတယ်။ နဂို array ရဲ့ address ကတော့အသုံးမပြုတော့လို့ ပျက်ပြယ်သွားပါတယ်။ ပုံကိုကြည့်မယ်ဆိုရင် a နဲ့ b က သီးခြားစီဖြစ်သွားလို့ b က a ရဲ့ပြောင်းလဲခြင်းတွေကို မသိတော့ပါ။

ဒီ သဘောတရားက b = [100] ရေးရင်လည်းအတူတူပဲဖြစ်မှာဖြစ်ပါတယ်။ ကိုယ်တိုင် လက်တွေ့ရေးသားကြည့်ပါ။

Arrays with Objects

Array ထဲမှာလည်း obj တွေ တခြား array တွေပါနိုင်ပါတယ်။ အောက်ပါ code ကိုကြည့်ပါ။

let a = [ 1, 2, { name: "Mg Mg"} ];
let b = a;

Array ထဲမှာ obj တစ်ခုပါလာတာဖြစ်လို့ Heap မှာ obj ကိုသိမ်းလိုက်ပြီး obj ရဲ့ address ကို array ထဲမှာ မှတ်လိုက်တာတွေ့ရမှာပါ။ ကျန်တာကတော့ သိပြီးသားတွေပဲဖြစ်ပါတယ်။

ဒီလိုရေးလိုက်ရင် b ပြောင်းလဲမှာလား?

a[2] = { age: 12 };

Array ထဲက obj ကိုပြင်လိုက်တဲ့အတွက် Heap မှာ obj အသစ်ကိုသိမ်းလိုက်ပြီး ထို obj ရဲ့ address ကို array မှာ update လုပ်လိုက်တာ တွေ့ရမှာပါ။ b ကနေကြည့်ရင် array ထဲက address ပြောင်းသွားတာမြင်ရတာဖြစ်လို့ b ပါ လိုက်ပြောင်းသွားမှာ ဖြစ်ပါတယ်။

ဒီနည်းအတိုင်းပဲ array ထဲမှာ array တွေထပ်ပါလာခဲ့ရင်လည်း ဒီလိုပဲအလုပ်လုပ်မှာဖြစ်ပါတယ်။

အခုဆိုရင် ဘယ်လိုရေးသားရင်တော့ reference လုပ်ထားတဲ့ variable မှာပြောင်းလဲမှုတွေဖြစ်ပြီး ဘယ်လိုရေးရင် မပြောင်းဘူးလဲဆိုတာ သိလောက်မယ် ထင်ပါတယ်။ လက်တွေ့စမ်းကြည့်ပြီး သေချာနားလည်အောင်လုပ်ပါ။

Shadow Copy

တချို့အခြေအနေတွေမှာ reference type တွေကို ပြောင်းလဲမှုတွေလုပ်တဲ့အခါ original variable ကိုမထိခိုက်စေချင်ရင် clone လုပ်ပြီးအသုံးပြုကြပါတယ်။ ဒီလိုလုပ်တဲ့အခါမှာ အောက်ပါနည်းတွေကိုသုံးရင် Shadow Copy ဖြစ်စေပါတယ်။

let a = { name: "Mg Mg", address: { street: "1st street"}}};
let b = {...a};
let c = Object.assign({}, a);

ဒီလို clone လုပ်ရင် memory မှာအခုလိုနေရာယူပေးပါတယ်။

Shadow Copy လုပ်လိုက်ရင် Obj ထဲက primitive type တွေကိုပဲ clone လုပ်ပေးတာဖြစ်ပြီး reference type တွေကိုတော့ နဂိုအတိုင်းညွှန်ပေးထားတာဖြစ်လို့ အကယ်၍ reference type ထဲက data ကိုပြင်မိရင် original variable ထဲမှာပါသွားပြီးသက်ရောက်စေမှာ ဖြစ်ပါတယ်။

Deep Copy

အကယ်၍ ကိုယ်က reference type တွေကိုပါ clone လုပ်စေချင်ရင် Deep Copy ဖြစ်အောင် အောက်ပါနည်းလမ်းကို သုံးနိုင်ပါတယ်။

let a = { name: "Mg Mg", address: { street: "1st street"}}};
let b = JSON.parse(JSON.stringify(a));

ဒီလိုရေးရင်တော့ memory မှာ အခုလို ဖြစ်သွားမှာပါ။

Obj ရဲ့ primitive type တွေကိုပဲ clone လုပ်ပေးတာမဟုတ်တော့ပဲ obj ထဲကတခြား obj တွေနဲ့ array တွေကိုပါ သီးခြားထုတ်ပြီး clone လုပ်ပေးလိုက်ပါတယ်။ ဒါကြောင့် original variable ကို သက်ရောက်မှာ မဟုတ်တော့ပါ။

ဒီနည်းအတိုင်းပဲ Array တွေကို clone လုပ်ရင်လည်း အတူတူပဲဖြစ်ပါတယ်။

အခုဖော်ပြခဲ့တဲ့ Shadow Copy နဲ့ Deep Copy ပြုလုပ်နည်းတွေက သဘောတရားနားလည်အောင်သာ ဥပမာပေးတာ ဖြစ်ပြီး ဒီနည်းတွေပဲ အသုံးပြုလို့ရတာ မဟုတ်ပါ။

ဒါဆိုရင်တော့ အနည်းဆုံး data types တွေရဲ့ အလုပ်လုပ်ပုံကို သဘောပေါက်မယ်လို့ယူဆပါတယ်။ ပိုမိုသိရှိဖို့အတွက် အောက်ပါ References တွေကို ဆက်လက်လေ့လာပေးပါ။

References

• Reference vs Primitive Values
• JavaScript Primitive vs. Reference Values
• Is JavaScript a pass-by-reference or pass-by-value language?
• Explaining Value vs. Reference in Javascript

JavaScript — Primitive Vs Reference was originally published in Learn Ng on Medium, where people are continuing the conversation by highlighting and responding to this story.

Routing နဲ့ပတ်သက်ပြီး အတော်များများကို လေ့လာပြီးတဲ့နောက်မှာ သိသင့်သိထိုက်တဲ့တချို့ feature တွေကိုဆက်ပြီး လေ့လာရပါမယ်။

canDeactivate

Route တစ်ခုကနေ တစ်ခြား route ကိုကူးတဲ့အခါ လက်ရှိ route ကနေ ထွက်ခွာခွင့် ရှိမရှိ စစ်ဖို့အတွက် အသုံးပြုပါတယ်။ များသောအဖြင့် တစ်ခုခု edit လုပ်ပြီး မsaveပဲ တစ်ခြား route ကူးသွားခြင်းကို ကာကွယ်ဖို့အတွက် သုံးကြပါတယ်။

လက်တွေ့စမ်းသပ်ဖို့အတွက် ServerEditComponent မှာ အခုလိုရေးပါ။

export class ServerEditComponent implements OnInit {

 changesSaved = false;

 constructor(
    private route: ActivatedRoute,
    private serverService: ServerService,
    private router: Router
  ) {}

 onUpdate() {
    this.serverService.updateServer(this.server);
    this.changesSaved = true;
    this.router.navigate(['../'], { relativeTo: this.route });
  }

 ngOnInit() {
    this.route.params.subscribe((params: Params) => {
      this.server = this.serverService.getServer(+params['id']);
    });
 }
}

Update လုပ်ဖို့ service နဲ့ ချိတ်ဆက်လိုက်တာ ဖြစ်ပါတယ်။ Update လုပ်ပြီးရင် အပေါ်အဆင့် route ကို navigate လုပ်သွားမှာပါ။

ဆက်လက်ပြီးတော့ update မနှိပ်ပဲ တခြား route ပြောင်းသွားမှာကို ကာကွယ်ဖို့ဆက်ရေးပါမယ်။

CanDeactivateGuardService ကို generate လုပ်ပါ။ အထဲမှာအောက်ပါ code တွေရေးပါ။

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root',
})
export class CanDeactivateGuardService
  implements CanDeactivate<CanComponentDeactivate>
{
  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate();
  }
}

CanDeactivate အတွက် interface တစ်ခုကို ထည့်ပေးထားပါတယ်။ canDeactivate() ထဲမှာ ခေါ်သုံးမဲ့ component က override လုပ်မဲ့ canDeactivate() ကိုထပ်ဆင့် ခေါ်ပေးထားပါတယ်။

ပြီးရင်တော့ AppRoutingModule မှာအခုလိုရေးပါ။

const appRoutes: Routes = [
...
{
    path: 'servers',
    ...
    children: [
      ...
      {
        path: ':id/edit',
        component: ServerEditComponent,
        canDeactivate: [CanDeactivateGuardService],
      },
    ],
  },
]

ServerEditComponent မှာအခုလိုရေးပါ။

export class ServerEditComponent implements OnInit, CanComponentDeactivate {

 canDeactivate(): Observable<boolean> | Promise<boolean> | boolean {
    if (!this.allowEdit) return true;
    return this.changesSaved
      ? true
      : confirm('Do you want to discard the changes?');
  }
}

canDeactivate() ထဲမှာ deactivate လုပ်ခွင့်ရှိရင် true ပြန်ပေးပြီး မရှိရင် false ပြန်ပေးလိုက်တာ ဖြစ်ပါတယ်။

အားလုံးပြီးရင် အခုလိုစမ်းကြည့်ပါ။ Edit ထဲရောက်ပြီး update မနှိပ်ပဲတခြား route ကို သွားမယ်ဆိုရင် confirm box တက်လာမှာ ဖြစ်ပါတယ်။

Static Data

Route မှာ static data တချို့ ထည့်ပေးချင်ရင် သုံးပါတယ်။

PageNotFoundComponent မှာ အခုလိုရေးပါ။

HTML
<h3>{{ errorMessage }}</h3>

TypeScript
errorMessage: string = '';
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
    this.errorMessage = this.route.snapshot.data['message'];
}

params, queryParams တို့လိုပဲ အခုလို snapshot နဲ့ရယူနိုင်သလို၊ subscribe လုပ်ပြီးလည်းရယူနိုင်ပါတယ်။

AppRoutingModule ရဲ့ wildcard မှာ အခုလိုပြင်လိုက်ပါ။

{
    path: '**',
    component: PageNotFoundComponent,
    data: { message: 'Page Not Found' },
},

data property က js obj တစ်ခုကို လက်ခံပါတယ်။ ဒါကြောင့် ကိုယ်ထည့်ပေးချင်တဲ့ data ကို အခုလို ထည့်ပေးလိုက်တာပါ။

ပြီးရင်တော့ URL မှာ မသတ်မှတ်ထားတဲ့ route ကိုရိုက်ထည့်ရင် အခုလိုတွေ့ရမှာ ဖြစ်ပါတယ်။

Dynamic Data (or) Resolver

Route အတွက် data ကို dynamic ရယူချင်ရင် အသုံးပြုပါတယ်။ Route ကိုမရောက်ခင် data ကို အရင်ယူပေးပါတယ်။

ServerComponent folder ထဲမှာ ServerResolverService ကိုအခုလို generate လုပ်လိုက်ပါ။

ပြီးရင်တော့အောက်ပါ code ကိုရေးပါ။

@Injectable({
  providedIn: 'root',
})
export class ServerResolverService implements Resolve<Server> {
  constructor(private serverService: ServerService) {}

resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<Server> | Promise<Server> | Server {
    return this.serverService.getServer(+route.params['id']);
  }
}

Resolve ကို implement လုပ်ရပါတယ်။ resolve() method ကို override လုပ်ပြီး ရယူလိုတဲ့ data ကို return ပြန်ပေးရပါတယ်။

AppRoutingModule ရဲ့ ServerComponent route မှာအခုလိုရေးပါ။

{
      path: ':id',
      component: ServerComponent,
      resolve: { server: ServerResolverService },
},

resolve property က js obj ကိုလက်ခံပါတယ်။ Key ကို server လို့ နံမည်ပေးလိုက်ပြီး ServerResolverServiceကို ထည့်ပေးလိုက်ပါတယ်။

ServerComponent မှာတော့ အခုလိုပြင်လိုက်ပါ။

ngOnInit() {
   // this.route.params.subscribe((params: Params) => {
   //   this.server = this.serverService.getServer(+params['id']);
   // });

this.route.data.subscribe((data: Data) => {
      this.server = data['server'];
    });
}

Static data ရယူတုန်းကလိုပဲ dynamic data ကိုရယူရပါတယ်။ ဒီနေရာမှာတော့ subscribe လုပ်ပြီး ရယူထားပါတယ်။

ပြန်စမ်းကြည့်ပါ server တွေ အရင်အတိုင်းဆက်ပြီး အလုပ်လုပ်နေတာ တွေ့ရမှာပါ။ မတူတာကတော့ params ကနေရယူတာမျိုး မဟုတ်တော့ပဲ resolver ကနေရယူလိုက်တာဖြစ်ပါတယ်။

Project

Password Manager app ရေးပါ။ နမူနာကို ဒီမှာ ကြည့်ပါ။ အဖြေကို ဒီမှာ ရနိုင်ပါတယ်။ App data အားလုံးကို AES 256 နဲ့ encrypt လုပ်ပြီးမှ localStorage မှာသိမ်းပေးပါ။ Encryption အတွက် crypto-js ကိုအသုံးပြုထားပါတယ်။ အောက်ပါအတိုင်း install လုပ်ပေးပါ။

npm install crypto-js
npm install @types/crypto-js

Implementation နမူနာကို ဒီမှာ ကြည့်နိုင်ပါတယ်။

Previous: Route Guards

Next: Observable

More in Routing was originally published in Learn Ng on Medium, where people are continuing the conversation by highlighting and responding to this story.