ng new myAngular
cd myAngular
npm install primeng --save
npm install primeicons --save
ตรวจสอบว่า
มีโฟลเดอร์ priming และ primeicons ใน myAngular\node_modules แล้ว
ตรวจสอบว่า
package.json
มี "primeicons":
"^2.0.0", "primeng": "^9.0.6 ในส่วน dependencies ต้องอยู่ dependencies
เท่านั้น ถ้าไปอยู่ใน ส่วนผิด ถือว่าผิด (เลขที่รุ่นขึ้นกับการติดตั้ง
ณ เวลา นั้นว่าได้รุ่นใด)
ณ
ขณะนี้ยังไม่ได้เปิด myAngular ที่สร้างไว้
จะต้องเปิด
ng serve --open
ใส่เพิ่ม
CSS
ของ primeNg ใน angular.json (ใส่ theme ชื่อ nova-light ซึ่งเปลี่ยนที่หลังได้)
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
]
เริ่มทดสอบคอมโพเน้นท์
primeNg
ด้วย Button เพิ่มในไฟล์ app.module.ts
import {ButtonModule} from 'primeng/button';
และใส่เพิ่ม
ButtonModule
ในส่วน import
imports: [
BrowserModule,
AppRoutingModule,
ButtonModule,
],
ใส่
ในส่วน app.component.html
(กรณีนี่ทดสอบในหน้าหลัก)
<h3 class="first">Button
Component</h3>
<p-button
label="Click"></p-button>
<p-button icon="pi pi-check"
label="Click"></p-button>
<p-button icon="pi pi-check"
iconPos="right" label="Click"></p-button>
<p-button icon="pi
pi-check"></p-button>
<p-button icon="pi pi-check"
[disabled]="true" label="Disabled"></p-button>
การนำเข้า
อะไรที่เป็นโมดูล (สังเกตุว่ามีคำว่า module ต่อท้าย)
จะต้องดำเนินการที่ไฟล์ app.module.ts ดังตัวอย่างการใช้
ButtonModule แต่ไม่ใช่ทุกตัวใน PrimeNg จะเป็นโมดูล เช่น MenuItem ซึ่งมาจาก primeng/api
ตัวนี้ไม่ถือเป็นโมดูลเป็นเพียงไทป์ (type) หนึ่ง
จึงไม่ต้องดำเนินการแบบเดียวกับโมดูล แต่ให้นำเข้า import ในคอมโพเน้นท์
ที่เรียกใช้ได้เลย เช่น
import {MenuItem} from 'primeng/api';
ในการนำไปใช้กับคอมโพเน้นท์
ต้องการไทป์นี้ในการอ้างอิงกับคอมโพเน้นท์ เช่น
items: MenuItem[ ];
ผลที่ได้
จากใช้ ButtonModule
และอิลีเม้นท์ <p-button> ตามรูปนี้
ไม่มีความคิดเห็น:
แสดงความคิดเห็น