การสร้างตารางแสดงข้อมูลจาก API ด้วย Angular 12

แนะนำเนื้อหาในบทความ

จากบทความ ทดลองใช้งาน Angular, React, Vue และ Svelte ในการสร้างตารางแสดงข้อมูลที่ได้รับจาก API บทความนี้จะลงรายละเอียดในส่วนของ Angular 12 ครับ

เริ่มติดตั้งและสร้างโปรเจ็ค

ติดตั้ง Angular CLI โดยใช้คำสั่งด้านล่างนี้

npm install -g @angular/cli

จากนั้นทำการสร้าง app ชื่อว่า my-table โดยใช้คำสั่งด้านล่างนี้

ng new my-table

เมื่อติดตั้งเรียบร้อยแล้ว เข้าไปยัง Folder ของ app และใช้คำสั่งด้านล่างนี้เพื่อดูผลลัพธ์

cd my-table
ng serve --open

ซึ่งระบบจะทำการเปิด Browser ให้อัตโนมัติที่ URL: http://localhost:4200/ พร้อมกับแสดงหน้าจอเริ่มต้นให้

สร้างหน้าจอที่จะแสดงผลตาราง

ทำการสร้าง Component ใหม่ ชื่อว่า table โดยใช้คำสั่งด้านล่างนี้

ng generate component table

ซึ่ง Folder Structure ของ Angular จะเป็นดังภาพด้านล่างนี้

การแสดงผล Component table ที่เราสร้างขึ้นต้องทำการแก้ไขไฟล์ 2 ไฟล์ ดังนี้

1. ไฟล์ app.module.ts ให้แก้ไขที่บรรทัดที่ 16 โดยใส่ TableComponent ไปแทน

2. ไฟล์ index.html ให้แก้ไขที่บรรทัดที่ 13 โดยใส่ชื่อ selector: app-table ซึ่งจะตรงกับไฟล์ table.component.ts

ถึงจุดนี้เมื่อเราทำการแก้ไขไฟล์และ Save หน้าจอที่ปรากฏบน Browser จะเกิดการ Refresh อัตโนมัติ หรือเรียกว่า Live Reload และแสดงผลลัพธ์หน้าจอ Component table ซึ่งตอนนี้จะไม่มีอะไรนอกจากข้อความ table works!

เรียกใช้ข้อมูลจาก API

ทำการ Import HttpClientModule มาเพื่อจะเรียกใช้งาน API โดยเพิ่มโค้ดใน บรรทัดที่ 6 และบรรทัดที่ 16 ที่ไฟล์ app.module.ts ดังตัวอย่างในโค้ดด้านล่างนี้

ทำการสร้าง Interface เพื่อกำหนดรูปแบบของ Object Person โดยสร้างไฟล์ person.ts ไว้ใน Folder: app และเพิ่มโค้ดด้านล่างนี้

ทำการสร้าง Service ชื่อว่า people ผ่าน Angular CLI โดยใช้คำสั่งด้านล่างนี้

ng generate service people

ระบบจะสร้างไฟล์ people.service.ts ซึ่งในโค้ดจะมี Class PeopleService มาให้ จากนั้นให้ทำการแก้ไขไฟล์เพื่อ import HttpClient และส่วนอื่นๆ ที่เกี่ยวข้องมาใช้งาน และสร้าง Method สำหรับเรียกใช้ข้อมูลจาก API โดยใช้โค้ดด้านล่างนี้

การนำข้อมูลที่ได้จาก API มาแสดงผลในตาราง

แก้ไขไฟล์ table.component.ts เพื่อ import PeopleService มาใช้งาน และทำการเรียก Method ที่สร้างไว้ในไฟล์ people.service.ts โดยใช้โค้ดด้านล่างนี้

ซึ่งเมื่อถึงขั้นตอนนี้หากตรวจสอบที่ Browser ในส่วนของ console ซึ่งเป็นผลมาจากโค้ดในบรรทัดที่ 21 จะพบว่ามีข้อมูลมาพร้อมให้แสดงแล้ว จากนั้นให้แก้ไขไฟล์ table.component.html เพื่อนำข้อมูลใส่ไปในตารางเพื่อแสดงผล โดยใช้โค้ดด้านล่างนี้

ซึ่งเมื่อถึงจุดนี้จะได้ตารางหน้าตาปกติ ดังภาพ

การใช้งานร่วมกับ Bootstrap Framework

ให้ติดตั้ง Bootstrap Framework ผ่าน Angular CLI โดยใช้คำสั่งด้านล่างนี้

ng add @ng-bootstrap/ng-bootstrap

เมื่อติดตั้งแล้วจะสามารถใช้ Tag HTML หรือ Component ตามคำแนะนำได้ โดยศึกษาข้อมูลเพิ่มเติมได้จาก https://ng-bootstrap.github.io/#/components

ถึงจุดนี้ตารางจะแสดงผลตามรูปแบบของ Bootstrap Framework แล้ว ดังภาพ

การ Build สำหรับ Production

ใช้คำสั่งด้านล่างนี้

ng build --base-href ./

ระบบจะทำการสร้าง Folder: dist/my-table พร้อมไฟล์ต่างๆ ให้ เป็นแบบ Static ซึ่งสามารถทำการ Upload ไฟล์ดังกล่าวไปยัง Hosting ได้เลย

โค้ดทั้งหมดของบทความนี้อยู่ที่ https://github.com/wutthiponghub/table-angular