ชำแหละ [(ngModel)]

สวัสดี สวีดัส หลังจากที่หายหน้าหายตากันไปนานแสนนาน (ช่วงงานเยอะ กราบขอภัย _/_ ทุกๆท่าน)

เอาละเพื่อไม่ให้เป็นการเสียนาฬิกา เห๊ย เวล๊าา!!! ฮิฮิ

เอาละเราเข้าเรื่องกันละมา
[(ngModel)] ที่เราใช้เขาอยู่ทุกวี่ทุกวัน และยังทำงานเป็น two-way binding แล้วยังไงต่อนะ มันจะมีประโยชน์อะไรถ้าเราไม่สามารถนำความสามารถนี้ของ ngModel ไปต่อยอดได่
ณ ตอนนี้ วันนี้ เราเลยจะมาแยกชิ้นส่วนของเขากัน ว่าจริงๆแล้ว มันมีความหมายอะไร และทำอะไรได้บ้าง
เพื่อไม่ให้เป็นการพร่ำเพื่อ (อันที่จริงนี้ก็พร่ำเพื่อสุดๆละนะ -__-)
รูปเดิม : [(ngModel)] = ทำงานเป็น two-way (properties+$event)
แยกส่วน : [ngModel] = ทำงานเป็น ตัวแปร properties
แยกส่วน : (ngModelChange) = ทำงานเป็น ตัวแปร $event

จริงๆแล้ว [ngModel] พอเราเขียนแบบนี้ มันก็คือ one-way binding นั้นละครับ แต่ในบทความอันเล็กๆนี้เราจะไม่ขอพูดถึงละกัน (เดี๋ยวไม่จบ ฮ่าๆๆ)
เอาละพอเราแยกมันออกเขียนแบบนี้เเล้ว มันดียังไง ทำไรได้ บอกเลยว่า

• เราสามารถใช้ pipe ที่เราเขียนขึ้นเอง ได้
• เราสามารถแปลงค่า ทุกๆสิ่งอย่างได้
• เราสามารถให้มันแสดงผลตามที่เราต้องการได้
• และอื่นๆอีกมากมาย ดังตัวอย่างเล็กๆน้อยๆ

<input [ngModel]="item.value | useMyPipeToFormatThatValue" 
      (ngModelChange)="item.value=$event" name="inputField" type="text" />

** หากผิดพลาดประการใด ก็ขออภัยไว้ ณ ที่นี้ด้วยนะครับ