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.

Nếu bạn muốn cung cấp thông tin quan trọng cho người dùng từ quan điểm UX của bạn hoặc muốn thu hút sự chú ý của họ. Sau đó, hướng dẫn ví dụ về góc SweetAlert2 này sẽ hữu ích cho bạn. Hãy cùng chothemewp.com tìm hiểu kỹ nhé
SweetAlert2 là một thư viện mạnh mẽ và nó cung cấp một giải pháp thay thế đẹp mắt, đáp ứng, có thể tùy chỉnh, dễ truy cập (WAI-ARIA) cho các hộp bật lên của JavaScript mà hoàn toàn không cần phụ thuộc.

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.

Một số tính năng chính của SweetAlert2 bao gồm:
Có thể tùy chỉnh giao diện: SweetAlert2 cho phép bạn tùy chỉnh giao diện của hộp thoại bằng cách cung cấp nhiều tùy chọn khác nhau về kiểu dáng, bao gồm các nút, biểu tượng và hiệu ứng hoạt hình . Bạn có thể tùy chỉnh màu sắc, phông chữ và các khía cạnh hình ảnh khác để phù hợp với thiết kế ứng dụng của bạn.
Nhiều loại hộp thoại: Nó cung cấp các loại hộp thoại khác nhau như cảnh báo, xác nhận và lời nhắc. Cảnh báo hiển thị một thông báo đơn giản, xác nhận yêu cầu người dùng xác nhận với các tùy chọn “OK” và “Hủy” và lời nhắc cho phép người dùng nhập giá trị.
API dựa trên lời hứa: SweetAlert2 sử dụng lời hứa để xử lý các tương tác của người dùng. Điều này giúp làm việc với mã không đồng bộ và xử lý phản hồi của người dùng dễ dàng hơn. Bạn có thể xâu chuỗi các hành động dựa trên lựa chọn của người dùng, giúp mã của bạn dễ đọc và dễ bảo trì hơn.
Hỗ trợ gọi lại và async/await: Ngoài lời hứa, SweetAlert2 hỗ trợ các chức năng gọi lại truyền thống để xử lý các tương tác của người dùng. Nó cũng hoạt động trơn tru với cú pháp async/await, cho phép bạn viết mã không đồng bộ theo kiểu đồng bộ hơn.
Tích hợp dễ dàng: SweetAlert2 được thiết kế để dễ dàng tích hợp vào các dự án web hiện có của bạn. Nó tương thích với các khung JavaScript phổ biến như React, Vue.js và Angular, cũng như các ứng dụng HTML và JavaScript đơn giản.

Đăng ký SweetAlert trong Thành phần ứng dụng

Trong bước này, chúng tôi sẽ đăng ký các mệnh lệnh cần thiết (dịch vụ gói) để gọi các tin nhắn thông báo qua gói sweetalert2.

Dưới đây là các phương thức chúng ta cần xác định để duy trì thứ tự ưu tiên cho việc mở cảnh báo SweetAlert trong sự kiện góc khi nhấp chuột.

  • nhỏAlert()
  • Thông báo thành công()
  • cảnh báoXác nhận()

Đặt mã bên dưới vào tệp app/src/app.comComponent.ts .

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');
      }
    });
  }
}

Hiển thị thông báo

Trong bước cuối cùng này, chúng tôi sẽ tự động hiển thị Cửa sổ bật lên thông báo và thông báo trong Angular với thư viện SweetAlert và các phương thức tùy chỉnh mà chúng tôi đã phát triển ở bước trước.

Đặt mã bên dưới vào tệp app/src/app.comComponent.html .

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

Chạy máy chủ phát triển

Sử dụng lệnh sau để khởi động ứng dụng góc:

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.

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

Góc Sweetalert2

Thông báo góc với Sweetalert2

Phần kết luận

Cuối cùng, chúng tôi đã đặt mọi thứ vào đúng vị trí của nó. Trong hướng dẫn này, chúng ta đã thảo luận về các bước cơ bản để tích hợp và sử dụng thư viện sweetalert2 trong Angular. Tôi chắc chắn bây giờ bạn đã hiểu toàn bộ quá trình.

Chúng tôi đã phát triển ba hộp cảnh báo cần thiết để thông báo cho người dùng từ mức không tuyệt đối. tôi hy vọng bạn đã tiếp thu mọi thứ theo ý mình mà tôi đã giải thích trong hướng dẫn này. Nó sẽ giúp bạn nâng cao kỹ năng của mình về Angular và SweetAlert2.

Hãy giúp ích cho người khác bằng cách chia sẻ hướng dẫn này, nếu phát hiện bất kỳ lỗi nào do sự liều lĩnh của tôi thì hãy thông báo cho tôi tại đây .

Đọc thêm bài viết

Cách css hiệu ứng chữ tỷ lệ đậu visa cực kỳ đẹp

Cách code và css thanh tiến trình cực kỳ đẹp

[Thủ thuật code chuyên nghiệp] Chia sẻ code button cực kỳ đẹp và chuyên nghiệp

Css button theo hình con quay wordpress

 

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0766734539
Tổng Đài Miễn Phí Cước Gọi
Yêu cầu tư vấn