Định dạng dữ liệu với Angular Pipe

Định dạng dữ liệu với Angular Pipe giúp bạn biến đổi dữ liệu khi xuất ra trong view. Việc biến đổi này là để thân thiện với người dùng. Ví dụ đổi chữ hoa – thường, dạng hiển thị của biến kiểu ngày giờ, số, tiền tệ…

Định dạng biến kiểu string với Angular Pipe

Các biến kiểu string khi hiển thị trong view có thể điều chỉnh lại. Gồm dạng chữ hoa, chữ thường, hoặc chữ hoa đầu mỗi từ. Cách dùng như sau :

{{ tênbiến | uppercase}} hoặc {{ tênbiến | lowercase}} hoặc
{{ tênbiến |  titlecase}}

<div id="thongtin">
  <p>Họ tên: {{sinhvien.hoten | uppercase}}</p>
  <p>Ngày sinh: {{sinhvien.ngaysinh}}</p>
  <p>Điểm: {{sinhvien.diem}}</p>
</div>

//app.component.ts
export class AppComponent {
  sinhvien = {
    hoten:'Mai Anh Tới', 
    ngaysinh:'2004-3-24',
    diem: 8
  }  
}

Bạn tham khảo thêm tại đây: https://angular.io/api/common/UpperCasePipe

Định dạng biến kiểu ngày giờ với Angular Pipe

Các biến có kiểu ngày giờ khi hiển thị trong view có thể định dạng lại theo format mong muốn . Cú pháp là {{ TênBiến | date: format }} .  Mời bạn xem ví dụ sau:

<div id="thongtin">
  <p>Họ tên: {{sinhvien.hoten | uppercase}}</p>
  <p>Ngày sinh: {{sinhvien.ngaysinh | date:'dd/MM/Y'}}</p>
  <p>Điểm: {{sinhvien.diem}}</p>
</div>

Tham khảo thêm tại: https://angular.io/api/common/DatePipe  để biết diễn tả năm, tháng, ngày, giờ, phút, giây…

Định dạng số với Angular Pipe

Các biến kiểu số có thể định dạng lại theo format thân thiện với người xem. Như chỉ định số các số lẻ, các số trong phần nguyên, phần lẻ…

Cú pháp lệnh để định dạng số là như sau: {{ tênbiến|number [ : digitsInfo [ : locale ] ] }}  Mời xem ví dụ:

<p>
  Số lượng sách: <input (keyup)="xuly($event)"> . 
  Tiền: {{thanhtien | number: '1.0-0'}}
</p>

//app.component.ts
export class AppComponent {  
  tensach="Nói với tuổi 20"; giasach = 25000;
  sinhvien = {hoten:'Mai Anh Tới', ngaysinh:'2004-3-24',diem: 8} 
  linkHocWeb = {
    url:'https://longnv.name.vn', ten:'Thầy Long Web',
    logo:'https://longnv.name.vn/wp-content/uploads/2019/09/logo3.png'
  }
  thanhtien:number=0;
  xuly(ev:any){
    var t: HTMLInputElement = ev.target;
    var sl = Number(t.value);   
    this.thanhtien = this.giasach* sl;
  }
}

Định dạng tiền tệ với Angular Pipe

Bạn cũng có thể định dạng các giá trị tiền tệ. Ví dụ như ký hiệu tiền tệ, số lượng các số trong phần nguyên, phần lẻ…

Cú pháp định dạng tiền tệ : {{ tênbiến | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

Mời xem ví dụ sau:

{{dongia*soluong | currency:'VND':' đồng ' }}

Việc định dạng liên quan mật thiết đến bind dữ liệu. Bạn xem thêm bài Data Binding Trong Angular  nhé.

Link hướng dẫn các loại định dạng dữ liệu với Angular Pipe, bạn tham khảo tài liệu chính thức ở đây : https://angular.io/api?query=pipe