Angular — Directives [Part 3]

Panusitt Khuenkham

5 min readSep 28, 2017

> คำสั่งต่างๆ ใน angular

ความเดิมจากตอนที่แล้ววววววว [ตอนที่ 2] — Databinding

หัวข้อที่เราจะสอนคร่าวๆ ก็จะมีดังนี้

What is directives ?
Using ngIf condition
Using ngIf — else condition
Using ngStyle
Using ngClass
Using ngFor
Getting the Index from ngFor

What is directives ?

>> directives คืออะไร ?

Directives ก็คือคำสั่งต่างๆ ที่ Angular มีมาให้พร้อมใช้งาน หรืออาจจะเป็นคำสั่งที่สร้างขึึ้นมาเพื่อใช้งานเองโดยเฉพาะ

บทความนี้ผมจะยกตัวอย่างคำสั่งที่จัดการกับ DOM ที่ Angular มีให้พร้อมใช้งานแล้ว

**DOM ย่อมาจาก (Document Object Model) ก็คือการมองส่วนต่างๆของหน้าเว็บให้เป็น object เพื่อให้เราสามารถเรียกใช้ object เหล่านั้นได้

เรามาเริ่มกันเลยยยยยยยยยยยยยยยยย ค้าบบบบบบบบบบ ~~~~~

Using ngIf condition

>> การใช้คำสั่งเงื่อนไข ngIf

Step 1 : เปิดไฟล์ students.component.html แล้วเขียนโค้ดดังนี้

<p>Student Name</p>
<input type="text"
       class="form-control"
       (input)="onUpdateStudentName($event)">
<!--<input type="text"-->
       <!--class="form-control"-->
       <!--[ngModel]="studentNewName">-->
<!--<p>{{ studentNewName }}</p>-->
<br>
<button type="button" class="btn btn-primary"
        [disabled]="!allowNewStudent"
        (click)="onCreateStudent()">Add Student</button>
<!--<p>{{ studentCreationStatus }}</p>-->
<!--<p [innerText]="allowNewStudent"></p>-->

<p>Student created, student name is {{ studentNewName }}</p>

<p>Student Name: {{ studentName }} with ID: {{ studentId }}</p>

<p>Student Name: {{ onGetName() }} with ID: {{ onGetId() }}</p>

<hr>

แล้วมาดูผลลัพธ์กัน

หากเราต้องการให้บรรทัดดังกล่าว แสดงก็ต่อเมื่อมีการกดปุ่ม Add Student ถึงจะขึ้นโชว์ เราก็ต้องมาสร้างเงื่อนไขให้มันหน่อย โดยลุย Step ต่อไป……

Step 2: เปิดไฟล์ students.component.ts แล้วเขียนโค้ดดังนี้

studentCreated = false;onCreateStudent() {
    this.studentCreated = true;
    this.studentCreationStatus = 'Student created';
}

Step 3: เปิดไฟล์ students.component.html แล้วเขียนโค้ดดังนี้

*ngIf="studentCreated"

แล้วมาดูผลลัพธ์กัน

โดยที่: 1) กรอก Student Name 2) กดปุ่ม Add Student

Using ngIf — else condition

>>การใช้คำสั่งเงื่อนไข ngIf — else

Step 4 : เปิดไฟล์ students.component.html แล้วเขียนโค้ดดังนี้

<p *ngIf="studentCreated; else noStudent">Student created, student name is {{ studentNewName }}</p>

<ng-template #noStudent>
    <p>No Student created!</p>
</ng-template>

แล้วมาดูผลลัพธ์กัน

หากเราทดสอบกรอกค่าแล้วกดปุ่ม Add Student ก็จะโชว์ข้อความอีกแบบ

Using ngStyle

>>การใช้คำสั่ง ngStyle

โจทย์ที่เราจะทำตอนนี้ก็คือ ถ้าสถานะของนักศึกษา ดังนี้

“กำลังศึกษา” แสดงตัวหนังสือสีแดง
“จบแล้ว” แสดงตัวหนังสือสีเขียว

Step 5 : เปิดไฟล์ students.component.ts แล้วเขียนโค้ดดังนี้

studentId = '9958';
studentName = 'bamossza';
studentStatus = 'จบแล้ว';

studentId2 = '9959';
studentName2 = 'DekDee';
studentStatus2 = 'กำลังศึกษา';getColorStatus(status: string) {
    return status === 'จบแล้ว' ? 'green' : 'red';
}

Step 6 : เปิดไฟล์ students.component.html แล้วเขียนโค้ดดังนี้

<p [ngStyle]="{ color: getColorStatus(studentStatus) }">
    Student Name: {{ studentName }}
    with ID: {{ studentId }}
    Status: {{ studentStatus }}</p>

<p [ngStyle]="{ color: getColorStatus(studentStatus2) }">
    Student Name: {{ studentName2 }}
    with ID: {{ studentId2 }}
    Status: {{ studentStatus2 }}</p>

แล้วมาดูผลลัพธ์กัน

Using ngClass

>>การใช้คำสั่ง ngClass

โจทย์ที่เราจะทำตอนนี้ก็คือ สร้าง CSS Class ที่ทำให้ตัวหนังสือหนา

Step 7 : เปิดไฟล์ students.component.css แล้วเขียนโค้ดดังนี้

.fontBold {
    font-weight: bold;
}

Step 8 : เปิดไฟล์ students.component.html แล้วเขียนโค้ดดังนี้

[ngClass]="{ fontBold: true }"

แล้วมาดูผลลัพธ์กัน

Using ngFor

>>การใช้คำสั่ง ngFor

ก่อนอื่นเราจะมาสร้างข้อมูลนักศึกษาให้อยู่ในลักษณะ Array ก่อน

เพื่อเป็นการจำลองข้อมูลเป็นชุดๆ

จากเดิม

studentId = '9958';
studentName = 'bamossza';
studentStatus = 'จบแล้ว';

studentId2 = '9959';
studentName2 = 'DekDee';
studentStatus2 = 'กำลังศึกษา';

เปลี่ยนเป็น

studentList = [
    {
        studentId: '9958',
        studentName: 'bamossza',
        studentStatus: 'จบแล้ว'
    },
    {
        studentId: '9959',
        studentName: 'DekDee',
        studentStatus: 'กำลังศึกษา'
    },
    {
        studentId: '9960',
        studentName: 'Zeza',
        studentStatus: 'จบแล้ว'
    }
];และทำการ Comment function ต่อไปนี้ เพื่อป้องกัน Error ที่เกิดขึ้น
onGetId() {
    // return this.studentId;
}

onGetName() {
    // return this.studentName;
}

Step 9 : เปิดไฟล์ students.component.html แล้วเขียนโค้ดดังนี้

แก้ไข Element Tag p ดังนี้

จากเดิม

<p [ngStyle]="{ color: getColorStatus(studentStatus) }" [ngClass]="{ fontBold: true }">
    Student Name: {{ studentName }}
    with ID: {{ studentId }}
    Status: {{ studentStatus }}</p>

<p [ngStyle]="{ color: getColorStatus(studentStatus2) }">
    Student Name: {{ studentName2 }}
    with ID: {{ studentId2 }}
    Status: {{ studentStatus2 }}</p>

เปลี่ยนเป็น

<p *ngFor="let item of studentList"
   [ngStyle]="{ color: getColorStatus(item.studentStatus) }"
   [ngClass]="{ fontBold: true }">
    Student Name: {{ item.studentName }}
    with ID: {{ item.studentId }}
    Status: {{ item.studentStatus }}</p>

แล้วเรามาดูผลลัพธ์กัน

อธิบายเพิ่มเติม

*ngFor="let item of studentList"*ngFor = คำสั่งลูป
let item = ตัวแปรชื่อว่า item โดยมีข้อมูล index ที่ n ของ studentList
studentList = ก้อนข้อมูลนักศึกษา(Array)

Getting the Index from ngFor

>>การใช้คำสั่ง ngFor เพื่อดึงค่า Index

Step 10: เปิดไฟล์ students.component.html แล้วเขียนโค้ดดังนี้

<p *ngFor="let item of studentList; let n = index;"
   [ngStyle]="{ color: getColorStatus(item.studentStatus) }"
   [ngClass]="{ fontBold: true }">
    Index: {{ n }}
    Student Name: {{ item.studentName }}
    with ID: {{ item.studentId }}
    Status: {{ item.studentStatus }}</p>

แล้วเรามาดูผลลัพธ์กัน