Định dạng dữ liệu trong Angular view

Định dạng dữ liệu trong Angular view 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 string trong Angular

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}} , {{ tênbiến | lowercase}} , {{ tênbiến | titlecase}} . Ví dụ:

//app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';  
@Component({
  selector: 'app-root', standalone: true,
  imports: [ CommonModule ],
  templateUrl: './app.component.html', styleUrl: './app.component.css'
})
export class AppComponent {
  sinhvien = {
    hoten:'Mai Anh Tới', 
    ngaysinh:'2004-3-24',
    diem: 8
  }  
}

Trong view, định dạng họ tên dạng chữ hoa như sau

<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>

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

Định dạng ngày giờ trong Angular

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 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ố trong Angular

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 | minDigit.m1Digit-m2Digit : locale  }}  

Trong đó minDigit là số digit tối thiểu trong phần nguyên, m1Ditgit là số digit tối thiểu trong phần lẻ, m2Digit là số digit tối đa trong phần lẻ. Mời xem ví dụ:

//app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';  
@Component({
  selector: 'app-root', standalone: true,
  imports: [ CommonModule ],
  templateUrl: './app.component.html', styleUrl: './app.component.css'
})
export class AppComponent {
  a:number = 3.67;  
  b:number = 123.98765432;
  n:number=352368262.6;
}

Trong view, hiện số theo định dạng :

<!-- app.component.html -->
<p>a= {{ a | number:'2.3-5'}} </p>
  





  


<p>b= {{ b | number:'4.3-5'}} </p>
{{ n | number:'2.2-4'}}

Định dạng số theo kiểu việt nam trong Angular 17

Để định dạng số theo kiểu việt name, trong component bạn import locale vi như sau

//app.component.ts
import { registerLocaleData } from '@angular/common';
import localeVI from '@angular/common/locales/vi';
registerLocaleData(localeVI);

Còn trong view , sử dụng locale với giá trị là vi như sau:

<!-- app.component.html -->
n = {{ n | number:'2.2-4':'vi'}}

Kết quả định dạng sẽ theo kiểu của việt nam như sau:

Định dạng tiền tệ trong Angular

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:

<!-- app.component.html -->
n = {{ n | currency:'VND':'đồng':'2.2-4':'vi'}}

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