Built-in Pipes

Photo by Arjay Bernardo on Unsplash

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 Pipes

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

Text transforms

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

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

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

Text transforms Pipes

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 လုပ်ပေးပါတယ်။ ရလဒ်အနေနဲ့ အခုလို မြင်ရမှာပါ။

Data from Fake Shop APIs

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

Previous: Http Requests

Next: Template-Driven Form