1. Tùy chỉnh hiển thị Checkbox với CSS

Để điều khiển việc hiển thị hoặc ẩn các ô chọn (checkbox) trong danh sách, chúng ta có thể bọc component ion-checkbox trong một khối div và sử dụng tính năng gán class động từ Angular.

<div [class]="statusVisibility">  
  <ion-checkbox color="primary" [checked]="isDefault"></ion-checkbox>
</div>

2. Chuyển đổi kiểu dữ liệu trong Ionic

Trong quá trình xử lý logic với TypeScript, việc chuyển đổi từ kiểu số sang chuỗi thường xuyên được sử dụng, ví dụ như khi gán giá trị vào URL hash hoặc hiển thị lên giao diện. Bạn có thể sử dụng phương thức toLocaleString() hoặc toString().

let current_page: number = 5;
// Chuyển đổi để gán vào hash của trình duyệt
window.location.hash = current_page.toLocaleString();

3. Xử lý sự kiện với thành phần ion-datetime

Khi người dùng thay đổi thời gian trên component ion-datetime, chúng ta cần bắt sự kiện để cập nhật dữ liệu lên server. Sử dụng ngModelChange là cách hiệu quả để thực hiện việc này.

<ion-datetime 
  cancelText="Hủy" 
  doneText="Hoàn tất" 
  displayFormat="DD/MM/YYYY" 
  [(ngModel)]="account.birthday" 
  (ngModelChange)="onDateUpdate($event)">
</ion-datetime>

Trong file xử lý logic (.ts):

onDateUpdate(event) {
  console.log('Ngày đã chọn:', this.account.birthday);
  const endpoint = this.service.getApi(`/user/profile/update?dob=${this.account.birthday}`);
  
  this.httpClient.get(endpoint).subscribe(
    (response) => {
      console.log('Cập nhật thành công', response);
    },
    (error) => {
      console.error('Lỗi hệ thống:', error);
    }
  );
}

4. Định dạng chuỗi phiên bản (Version Number)

Nếu bạn có một mã phiên bản dưới dạng số nguyên (ví dụ: 123) và muốn định dạng lại thành chuỗi "1.2.3", bạn có thể thực hiện các phép toán chia lấy phần nguyên và phần dư như sau:

let rawVersion: any = data.versionCode; // Giả sử là 215
let major = Math.floor(rawVersion / 100);
let minor = Math.floor((rawVersion % 100) / 10);
let patch = rawVersion % 10;

this.versionString = `${major}.${minor}.${patch}`;
console.log('Version hiển thị:', this.versionString); // Kết quả: 2.1.5

5. Quản lý vòng đời trang (Page Lifecycle Hooks)

Ionic cung cấp các hàm hook để quản lý trạng thái của một trang từ khi khởi tạo cho đến khi bị hủy bỏ:

• ionViewDidLoad: Chạy khi trang được nạp lần đầu, không chạy lại nếu trang được lưu trong cache.
• ionViewWillEnter: Kích hoạt khi trang chuẩn bị hiển thị.
• ionViewDidEnter: Kích hoạt khi trang đã hiển thị hoàn toàn.
• ionViewWillLeave: Kích hoạt khi người dùng chuẩn bị rời khỏi trang.
• ionViewDidLeave: Kích hoạt khi đã rời khỏi trang.
• ionViewWillUnload: Chạy khi trang bị hủy và các phần tử bị gỡ bỏ khỏi DOM.
• ionViewCanEnter/ionViewCanLeave: Kiểm tra quyền truy cập hoặc điều kiện để vào/rời trang.

6. Căn giữa phần tử bằng CSS tuyệt đối

Để căn chỉnh một khối nội dung nằm chính giữa màn hình theo cả hai chiều ngang và dọc, bạn có thể sử dụng kỹ thuật position: absolute kết hợp với margin âm.

.center-box {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px; /* Bằng nửa chiều cao */
    margin-left: -100px; /* Bằng nửa chiều rộng */
}

7. Tích hợp tính năng gọi điện thoại

Để ứng dụng có thể mở trình quay số điện thoại, trước hết cần cấu hình trong file config.xml:

<access origin="tel:*" launch-external="yes"/>

Sau đó, sử dụng thẻ liên kết tiêu chuẩn trong HTML:

<a href="tel:0901234567">Gọi cho chúng tôi: 0901234567</a>