Thông báo bật lên góc 16 với ví dụ SweetAlert2

Hướng dẫn này giải thích cho bạn cách hiển thị thông báo cảnh báo hoặc cửa sổ bật lên trong Angular 16 với gói npm SweetAlert2. Chúng ta sẽ tìm hiểu cách sử dụng sweetalert2 trong góc hoàn toàn và tìm hiểu cách hiển thị các hộp cảnh báo với thông tin lấy người dùng làm trung tâm. Chúng ta sẽ thực hiện theo tất cả quy trình dần dần và đều đặn để cài đặt SweetAlert2 trong góc. Tôi sẽ cố gắng chia nhỏ toàn bộ hướng dẫn thành các bước nhỏ để minh họa ví dụ SweetAlert2 góc cạnh.

Hướng dẫn thông báo bật lên Angular 16 SweetAlert

• Điều kiện tiên quyết
• Cài đặt ứng dụng góc
• Cài đặt SweetAlert2 trong Angular
• Đăng ký SweetAlert trong Thành phần
• Hiển thị thông báo
• Chạy máy chủ phát triển

Điều kiện tiên quyết

• Nút
• npm
• Gói SweetAlert2
• CLI góc
• Góc mới nhất
• Trình soạn thảo mã hoặc IDE

Cài đặt ứng dụng góc

Chạy lệnh sau để cài đặt phiên bản Angular CLI mới nhất.

npm install -g @angular/cli@latest

Tốt nhất là bước này bao gồm cài đặt một ứng dụng góc cạnh mới trên máy phát triển của bạn.

Chạy lệnh sau, trả lời một số câu hỏi do CLI góc.

ng new angular-sweetalert-demo

Cuối cùng, quá trình cài đặt đã hoàn tất. Vào bên trong thư mục dự án.

cd ng new angular-sweetalert-demo

Cài đặt SweetAlert2 trong Angular 12

Cài đặt gói npm sweetalert2 để hiển thị các thông báo và cảnh báo đẹp mắt ở góc 12. Chạy lệnh trong terminal của bạn:

npm i sweetalert2

Để hiển thị thông báo hấp dẫn cho người dùng, trước tiên bạn phải kết hợp đường dẫn CSS sweetalert2 trong tệp Angular.json .

....
....
....
"styles": [
      "src/styles.css",
      "node_modules/sweetalert2/src/sweetalert2.scss"
    ],
....
....
....

SweetAlert2 là một thư viện JavaScript cung cấp các hộp thoại cảnh báo, xác nhận và nhắc nhở đẹp mắt và có thể tùy chỉnh cho các ứng dụng web. Đây là phiên bản nâng cấp của thư viện SweetAlert ban đầu và cung cấp trải nghiệm người dùng hiện đại và nâng cao hơn.

import { Component, OnInit } from '@angular/core';
import Swal from 'sweetalert2';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  ngOnInit() {
    console.log('Life Cyle Hook with spontaneous response.');
  }
  tinyAlert() {
    Swal.fire('Hey there!');
  }
  successNotification() {
    Swal.fire('Hi', 'We have been informed!', 'success');
  }
  alertConfirmation() {
    Swal.fire({
      title: 'Are you sure?',
      text: 'This process is irreversible.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, go ahead.',
      cancelButtonText: 'No, let me think',
    }).then((result) => {
      if (result.value) {
        Swal.fire('Removed!', 'Product removed successfully.', 'success');
      } else if (result.dismiss === Swal.DismissReason.cancel) {
        Swal.fire('Cancelled', 'Product still in our database.)', 'error');
      }
    });
  }
}

<button (click)="tinyAlert()">Simple Notification</button>
<button (click)="successNotification()">Sucess Notification</button>
<button (click)="alertConfirmation()">Show me Confirmation</button>

ng serve --open

Lệnh trên sẽ tự động mở ứng dụng của bạn trên trình duyệt, sau đó xuất ra màn hình trình duyệt sau khi nhấp vào bất kỳ nút nào.