วิธีการใช้ materialize-css ร่วมกับ Angular 4

ในการพัฒนาโปรแกรมด้วย Angular 4 นั้นตัว angular เองไม่ได้มี css framework ติดตั้งมาในตัว angular เอง แต่มี project https://material.angular.io/ ให้สามารถติดตั้งไปใช้ได้ แต่เท่าที่ลองเล่นดูยังมีอีกหลาย framework ที่น่าสนใจ ตัวนึงที่ได้ลองเล่นมาหลาย project แล้วรู้สึกว่ามันค่อนข้างง่ายเหมาะสำหรับผู้เริ่มต้น ด้วยที่ว่า synctax มันออกแบบมาได้ค่อนข้างกระชับและเช้าใจง่าย นั่นก็คือ http://materializecss.com/

เนื่องด้วย Materialize-Css เป็น framework ที่พัฒนาต่อยอดจาก Jquery ฉนั้นตอนที่เราจะติดตั้งใช้ในโปรเจ็คเราตัว materialize-css จะติดตั้ง jquery มาพร้อมกันด้วยเลย

วิธีการติดตั้งใน project ที่พัฒนาด้วย angular-cli + typescript

npm install materialize-css @types/materialize-css --save
npm install angular2-materialize

หลังจากนั้นให้เพิ่ม scripts, styles เข้าไปที่ file .angular-cli.json ดังภาพ

แก้ file tsconfig.app.json เพิ่ม JQuery, materialize-css เข้าไปดังตัวอย่างเพื่อให้ typescript รู้จัก JQuery, materialize-css ที่เราติดตั้งไป

เพิ่ม module ลงไปที่ file app.module.ts ดังนี้

import { MaterializeModule } from "angular2-materialize";
@NgModule({
imports: [
  //...
  MaterializeModule,
],
  //...
})

วิธีการใช้งาน

<ul materialize="collapsible" 
    class="collapsible" 
    data-collapsible="accordion">
    <li>
       <div class="collapsible-header">
          <i class="material-icons">filter_drama</i>First
       </div>
       <div class="collapsible-body">
          <p>Lorem ipsum dolor sit amet.</p>
       </div>
    </li>
    <li>
       <div class="collapsible-header">
          <i class="material-icons">place</i>Second
       </div>
       <div class="collapsible-body">
          <p>Lorem ipsum dolor sit amet.</p>
       </div>
    </li>
    <li>
       <div class="collapsible-header">
          <i class="material-icons">whatshot</i>Third
       </div>
       <div class="collapsible-body">
          <p>Lorem ipsum dolor sit amet.</p>
       </div>
    </li>
</ul>

เนื่องด้วย materialize-css เป็น framework ที่ต้องมีการเรียก function ของ jquery ให้ทำการ render html ก่อนถึงใช้งานได้ ตัว lib angular2-materialize ได้เตรียม directive ชื่อ materialize ให้เราได้เรียกใช้ function ในการ render ของ component นั้นๆ ให้เทียบเท่าการทำงานแบบ .ready ของ jquery ฉนั้นตอนเราจะใช้ component ไหนๆ ของ materialize-css ที่จำเป็นต้องมีการเรียกให้ function ของ jquery ก่อน เราก็ต้องนำชื่อ function มาใส่ใน directive นี้