Điều kiện trong Angular (Angular Directives)

Xin chào các bạn hôm nay Angular cơ bản phần 2 sẽ giới thiệu cho các bạn những lệnh điều kiện trong Angular, hiện nay mình sẽ viết dựa trên phiên bản Angular 7, những hầu hết các phiên bản đều giống nhau vì thế mọi người yên tâm, nó giống nhau về cấu trúc và cách xử lý.

Lệnh điều kiện trong Angular tên tiếng anh (Angular Directives) nếu như bạn nào tiếng anh tốt các bạn có thể tìm tài liệu lập trình Angular bằng tiếng anh, đây là những kiến thức mình đã học và vận dụng vào dự án.

Nội dung bài học Điều kiện Angular

1. Điều kiện Angular 7 là gì (Angular Directive what)
2. Phân biệt điều kiện thuộc tính và điều kiện cấu trúc
3. Cách tạo các điều kiện 
4. Các lệnh điều kiện trong Angular

I. Điều kiện trong Angular 7 là gì ?

Điều kiện được thực hiện trong các lệnh Dom của html và typeScripts, chúng được chỉ định nhiều thành phần và những logic trong các đoạn mã chương trình hiện nay trong ngôn ngữ Angular có 3 điều kiện như sau:

1. Điều kiện thành phần (Component Directives)
2. Điều kiện cấu trúc (Structural Directives)
3. Điều kiện thuộc tính(Attribute Directives)

1. Điều kiện thành phần
Được sử dụng trong các lớp, hàm xử lý nó thực kiểm tra các chương trình đầu ra và đầu vào.
2. Điều kiện cấu trúc
Nó được bắt đầu bằng dấu *, với những điều kiện này được sử dụng để thao tác và thay đổi những cấu trúc của lệnh DOM, ví dụ dưới đây thể hiện các lệnh điều kiện.

 *ngIf và *ngFor

 Ở 2 điều kiện trên ở mục IV mình sẽ nói chi tiết hơn và làm nhiều ví dụ hơn
 3. Điều kiện thuộc tính
 Thuộc tính chỉ thị được sử dụng để thay đổi giao diện và hành vi của các yếu tố DOM.
 Ví dụ: ngClass, ngStyle, v.v.

 II. Phân biệt sự khác nhau giữa các điều kiện

 Sau đây tôi chỉ phân biệt giữa 2 điều kiện thuộc tính và điều kiện cấu trúc về sự khác biệt như sau:

 III. Tùy chỉnh các lệnh điều kiện

 Bạn có thể tạo các chỉ thị tùy chỉnh của riêng mình để sử dụng trong các thành phần Angular.
 Tạo điều kiện thuộc tính cơ bản bạn đã bao giờ biết đến các thuộc tính như ngClass và ngStyle chưa, có lẻ đây là lần đầu bạn biết đến nó, bây giờ chúng ta sẽ tạo ra một thư mục bạn có thể gọi là SimpleStyleDirective sau đó, tạo một tâp tin trong thư mục có tên là "Simple-style.index.ts"

 import {Directive, ElementRef, OnInit} from '@angular/core';
 @Directive( {
  selector: '[appSimpleStyle]'
})
export class SimpleStyleDirective implements OnInit {
  constructor(private elementRef: ElementRef) {
  }
  ngOnInit() {
  this.elementRef.nativeElement.style.backgroundColor = 'Red';
  }

 Bây giờ, bạn phải thông báo cho Angular rằng bạn có một chỉ thị mới. Vì vậy, bạn phải thêm SimpleStyleDirective vào App. module. TS và cũng có nhập nó.

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {SimpleStyleDirective} from './simple-style/simple-style.directive';
@NgModule({
  declarations: [
    AppComponent,
    SimpleStyleDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Bây giờ, chỉ thị của bạn được tạo ra. Hãy kiểm tra nó. Mở App. component. html và sử dụng của bạn tạo SimpleStyleDirective

<p appSimpleStyle>Điều kiện trong angular 7</p>

IV. Các lệnh điều kiện trong Angular 7

1. Sử dụng điều kiện *ngIf để thể hiện đầu ra có điều kiện
Sau đây là một ví dụ thể hiện khi bạn sử dụng điều kiện *ngIf trong Angular
Bạn tạo một Component có tên là AppComponent.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'appdirective';
  allowNewServer = false;
 serverCreationStatus = 'No server is created.';
  serverName = 'Test Direction';
  serverCreated = false;

  ngOnInit() {
  }
  onCreateServer() {
    this.serverCreated = true;
    this.serverCreationStatus = 'Server is created. Name of the server is' + this.serverName;
  }
  OnUpdateServerName(event: Event) {
    this.serverName = (<HTMLInputElement>event.target).value;
  }
}

Sau đó bạn tạo cho mình một component.html

<p>
  Server2 is also working fine.
</p>

<label>Server Name</label>
<input type="text"
       class="form-control"
[(ngModel)]="serverName">
<button
  class="btn btn-primary"
  [disabled]="allowNewServer"
  (click)="onCreateServer()">Add Server</button>
<p *ngIf="serverCreated"> Server is created. Server name is {{serverName}}</p>

Nếu như bạn chưa biết cách tạo project như thế này hãy quay lại bài học Angular cơ bản 1 nhé.
Đây là kết quả của chương trình trên.

Khi chúng ta thay đổi giá trị đầu vào và bấm vào nút "Add Server", bạn sẽ thấy kết quả sau:

Bạn có thể thấy trong ví dụ ở trên bằng cách sử dụng chỉ thị * ngIf, chúng ta có thể thay đổi điều kiện để hiển thị kết quả phù hợp.

Bạn có thể kiểm tra xem nguồn đầu ra của bạn trước và sau khi thêm máy chủ. Bạn sẽ thấy sự khác biệt rõ ràng.
Trước khi thêm máy chủ:

Sau khi thêm máy chủ:

Sử dụng chỉ thị * ngIf để thay đổi đầu ra có điều kiện
Ví dụ:
tập tin component. html:

<p *ngIf="serverCreated; else noServer"> Server is created. Server name is {{serverName}}</p>
<ng-template #noServer>
  <p>No Server is created.</p>
</ng-template> 

Đầu ra sẽ giống như thế này.

Use of *ngIf directive to change the output conditionally
Khi chúng ta thay đổi giá trị đầu vào và bấm vào nút "Add Server", bạn sẽ thấy kết quả sau:

Vì vậy, bạn có thể thấy rằng làm thế nào một chỉ thị cấu trúc có thể thay đổi DOM.
2. Sử dụng điều kiện *ngStyle
Thuộc tính ngStyle được sử dụng để thay đổi hoặc phong cách nhiều thuộc tính của Angular. Bạn có thể thay đổi giá trị, màu, và kích thước, vv của các yếu tố.
Sau đây là một vị dụ thể hiện điều kiện ngStyle
StyleExampleComponent.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-style-example',
  templateUrl: './style-example.component.html',
  styleUrls: ['./style-example.component.css']
})
export class StyleExampleComponent implements OnInit {
  serverID: number = 10;
  serverStatus: string = 'Offline';

  constructor () {
  this.serverStatus = Math.random() > 0.5 ? 'Online' : 'Offline';
}
 getServerStatus() {
  return this.serverStatus;
  }
  ngOnInit(){
 
  }
}

style-example.component.html

<p>Server with ID {{serverID}} is {{serverStatus}}. </p> 

Ở đây, chúng tôi đã chọn một phương pháp để hiển thị phương pháp ngẫu nhiên "trực tuyến" và "Offline". Có 50% cơ hội.
Sau đây là kết quả của việc thực hiện chương trình trên

Hãy sử dụng ngStyle để thay đổi màu nền ' màu đỏ ' khi máy chủ đang offline và "xanh" khi máy chủ trực tuyến.
Trong tập tin html bạn có thể thay đổi như sau

<p [ngStyle]="{backgroundColor: getColor()}">  Server  with ID {{serverID}} is {{serverStatus}}. </p>

Và đây là kết quả của việc thực hiện ngStyle như sau:

3. Sử dụng ngClass
Làm thế nào để áp dụng các lớp CSS động với ngClass
Trong bài viết trước, chúng tôi đã thấy rằng làm thế nào để sử dụng ngStyle để thực hiện thay đổi trong một yếu tố động. Ở đây, chúng ta sẽ sử dụng chỉ thị ngClass để áp dụng một lớp CSS cho phần tử. Nó tạo điều kiện cho bạn để thêm hoặc loại bỏ một CSS động.
Ví dụ:
Hãy tạo một lớp trong tập tin component. TS mà sẽ thay đổi màu của văn bản màu vàng nếu máy chủ đang trực tuyến.
Bạn có thể thực hiện một component khác và làm từng bước như sau
Tạo một file component .ts

import {Component} from '@angular/core';
@Component(
  {selector: 'app-server',
    templateUrl: 'server.component.html',
    styles: [`
    .Online{
      color: yellow;
    }`]

  })
export class ServerComponent {
  serverID: number = 10;
  serverStatus: string = 'Offline';

  constructor () {
    this.serverStatus = Math.random() > 0.5 ? 'Online' : 'Offline';
  }
  getServerStatus() {
    return this.serverStatus;
  }
  getColor() {
    return this.serverStatus === 'Online' ? 'green' : 'red';
  }
} 

Sau đó thực hiện một component .html

<p [ngStyle]="{backgroundColor: getColor()}"
[ngClass]="{Online: serverStatus === 'Online'}">  Server  with ID {{serverID}} is {{serverStatus}}. </p>