Angular 19 + PrimeNG ตอนที่ 6: แนะนำ PrimeNG, PrimeIcons และ PrimeFlex

วิธีการติดตั้ง Prime NG Prime Icon และ Prime Flex ใน Angular 19 (Prime 19)

(ใน LAB มีการติดตั้งให้แล้วเรียบร้อยแล้ว)

ติดตั้ง Package ของ Prime NG

npm install primeng primeflex primeicons @primeuix/themes @primeuix/themes
// กรณีต้องการใช้ ChartJS
npm install chart.js --save
// กรณีต้องการใช้ Editor
npm install quill

ที่ไฟล์ app.module.ts ให้เรียกใช้งาน Theme และ Component ที่ต้องการ

import { definePreset, palette } from '@primeng/themes';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { providePrimeNG } from 'primeng/config';
import Aura from '@primeuix/themes/<Preset เช่น aura>';  // กำหนด Preset Theme ตรงนี้
const ThemeConfig = definePreset(Aura, {
semantic: {
primary: palette('{<สี เช่น blue> }'),   // สีที่ต้องการใช้ดูตัวอย่างจากเว็บ Prime NG
},
});
// Prime NG Component Module เช่น
import { ButtonModule } from 'primeng/button';
…
@NgModule({   declarations: [AppComponent  , …]   imports: [… , ButtonModule , …]   providers: [     … ,      provideAnimationsAsync,     providePrimeNG({
theme: {
preset: ThemeConfig,
options: {
darkModeSelector: '.non-dark-selector',  // ปิดการใช้ Dark mode
},
},     …   ] })
export class AppModule {}

Note: Compoennt ต่าง ๆ หากมีการแยก Module ย่อยจะต้อง Import ใหม่ในแต่ละ Module แต่ Theme สามารถ Import ที่ App Module ที่เดียวไม่ต้อง Import ใหม่ในแต่ละ Module ย่อยแล้ว

ทดลองเรียกใช้งาน

// เรียกใช้ผ่าน Template
<button pButton label=”Button” icon=”pi pi-check” class=””></button>
// หรือเรียกแบบใช้ Component ตรง ๆ
<p-button label=”Submit” icon=” pi pi-check” styleClass=””></p-button>

ก็จะได้ปุ่มตามรูป