Project PhoneNumber by Drag and Drop EP.1

เราจะสร้างโปรเจคมาหนึ่งตัว เพื่อเก็บเบอร์โทร และสามารถลากวางได้ ตามที่เราต้องการจัดลำดับ พร้อมกับแสดงรายละเอียด

ที่มา https://articulate-heroes.s3.amazonaws.com/uploads/rte/jvgeyozl_roundup--Drag-and-Drop-examples.png

เริ่มต้นการสร้างโปรเจคกัน

โปรเจคของเราชื่อว่า my-phoneNumbers ด้วยคำสั่งนี้

ng new my-phoneNumbers    //คำสั่งสร้างโปรเจค
ls   //คำสั่งดูว่ามีโปรเจคที่สร้างไหม
cd my-phoneNumbers   //คำสั่งเข้าไปในโปรเจค
code .    //คำสั่งเปิดโปรเจคด้วยโปรแกรม Visual Studio Code
command + J     //คำสั่งเปิด Terminal ที่โปรแกรม Visual Studio Code
ng serve   //คำสั่งรันโปรเจค

เมื่อเราสร้างโปรเจค และรันเรียบร้อยแล้ว เราไปดูที่ Browser localhost:4200 จะได้หน้าตามาแบบนี้

Install Material and Bootstrap

หลังจากนั้นเราจะ Install Material Angular เพื่อเอาไว้ตกแต่งที่ Template คำสั่งที่นี้ที่ Terminal

ng add @angular/material

เลือก Indigo/Pink > ตั้งค่าแบบ global (y) > ตั้งค่า browser animations (y) แล้วรอจนกว่าจะติดตั้งเสร็จ

พร้อมกับ Install Bootstrap ลงไปด้วยเพื่อจัด Layout, Position ด้วยเลยเพื่อจะได้ไม่ต้องกลับไปกลับมา ด้วยคำสั่งนี้

npm install bootstrap

และ import Bootstrap ลงไปที่ไฟล์ styles.css

@import "~bootstrap/dist/css/bootstrap.min.css";

พอเครื่องมือเราพร้อมแล้ว เราจะทำการลบหน้า Template ออกให้หมด และเพิ่มโค้ดนี้เข้าไปแทน ที่ไฟล์ app.component.html ดังนี้

<div>
   <div *ngFor="let item of items$ | async">
   <mat-card class="mt-1">
      <div>{{item.name}}</div>
      <div>
         <a href="tel:{{item.phoneNumber}}">{{item.phoneNumber}}</a>    
      </div>
   </mat-card>
</div></div>

หมายเหตุ 
   href="tel:{{item.phoneNumber}}" //ให้สามารถคลิกและโทรออกได้

เมื่อเราใช้ tag <mat-card> เราก็ต้อง import เขาเข้ามาด้วย ไม่เช่นนั้นจะใช้งานไม่ได้ จะฟ้อง Error เราต้องไปที่ไฟล์ app.module.ts และ import mat-card มาให้เรียบร้อย พร้อมกับนำไปใช้งาน

import {MatCardModule} from '@angular/material/card';
MatCardModule

จากนั้นไปที่ไฟล์ app.component.ts เพื่อประกาศตัวแปร ที่เป็น Observable ที่จะรับค่าตัวแปร name: string และ phoneNumber: srting เป็นแบบ array []

และจำลอง Data เก็บไว้ในตัวแปร items$ ที่เป็น Observable เพื่อเอามาแสดงที่หน้า Template ที่มีชื่อ และหมายเลขเบอร์โทรศัพท์

items$ : Observable<{ name: string, phoneNumber: string }[]>
   
ngOnInit(): void {
   this.items$ = of([
      { name: "Tom", phoneNumber: "0891223457" },
      { name: "Teay", phoneNumber: "0812345678" },
      { name: "Toa", phoneNumber: "0851234567" }
   ])
}

จากนั้นบันทึกแล้วกลับไปดูที่ Browser ของเรากัน จะได้หน้าตาประมาณนี้

เมื่อได้อย่างงี่แล้วเราจะสร้างปุ่มมาหนึ่งปุ่ม เพื่อเอาไว้กด ให้เราไปที่ไฟล์ app.component.html และเพิ่มโค้ดนี้ลงไป ภายใน <div> จะมี class ที่ทำให้ปุ่มอยู่ตรงกลาง และห่างจากขอบ พร้อมกับสีของปุ่มด้วย

<div class="align-self-end d-flex justify-content-center p-2 bg-white">
   <button mat-fab color="warn">
   <mat-icon>home</mat-icon>
   </button>
</div>

หมายเหตุ class=”align-self-end  //กำหนดให้อยู่ล่างสุด
               d-flex justify-content-center    //กำหนดให้อยู่ตรงกลาง
               p-2     //padding ขอบด้านนอก 
               bg-white”    //สีของพื้นหลัง

แต่ยังติด Error เพราะยังไม่ได้ import mat-icon, mat-button มาใช้งานที่ app.module.ts งั้นเราไป import เข้ามากัน

import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
MatIconModule,
MatButtonModule

จากบันทึกและรันใหม่อีกรอบ ไปดูที่ Browser

จากนี้เราต้องการที่จะให้ปุ่มลงมาอยู่ล่างสุด เราตรงไปที่ไฟล์ app.component.html เพื่อแก้ไขนิดหนึ่ง โดยเราจะเพิ่ม <div> ให้ครอบทั้งหมด และเพิ่ม class นี้เข้าไป ดังนี้

class="layout h-100"

และเพิ่ม classที่ไฟล์ app.component.css

บันทึกแล้วไปดูที่ Browser กันทุกคนนนน

อะเค เราไว้เท่านี้เดี๋ยวมาต่ออีก เพราะเมื่อคืนเรียนไหวเท่านี้ กลัวลืมด้วย 555+ ขอบคุณคุณครูของฉัน น่ารักที่สุด

เอกสารประกอบ

Bootstrap

Flex

Angular Material

Angular Material

Positioning Elements on the Web

Positioning Elements on the Web