由於在未來的專案有機會使用到 sweetalert2，所以就藉這個機會來介紹一下如何在 Angular 環境裡使用 sweetalert2。

安裝 sweetalert2

1. 打開 VS Code 終端機，輸入以下指令：

npm i sweetalert2 

2. 將 sweetalert2 引入到 Angular 中：
   同樣找到 angular.json 裡的 styles 及 scripts 區塊，分別輸入以下路徑：
   

styles 區塊：

"./node_modules/sweetalert2/dist/sweetalert2.css",

scripts 區塊：

"./node_modules/sweetalert2/dist/sweetalert2.min.js"

3. 接著來需要用到的地方 import sweetalert2：
   我們目前的專案架構很單純，先把之前介紹的 Bootstrap 程式碼從 index.html 移到 src/app 資料夾底下的 app.component.html 裡，而裡面原本預設的程式碼可以先移除，讓畫面單純一點。

然後到同一個資料夾中的 app.component.ts 裡，輸入兩段程式碼：

// 1
import Swal from 'sweetalert2';

// 2
  simpleAlert(){
    Swal.fire('Hello Angular');
  }

4. 使用事件繫結觸發 sweetalert
   我們回到 app.component.html 使用事件繫結：

  <button type="button" class="btn btn-success" (click)=simpleAlert()>Success</button>

此時點擊畫面上 Success 的按鈕，就會出現 sweetalert2 樣式的提醒視窗了。

5. 以物件形式設定 sweetalert2
   sweetalert2 官方網站上有許多樣式的設定方法，我們剛才實作了最簡單觸發方法，現在，如果要加入別的屬性，讓 sweetalert2 的變化更豐富，我們可以把原本的程式碼：

  simpleAlert(){
    Swal.fire('Hello Angular');
  }

改成物件形式：

    Swal.fire({
      text: 'Hello Angular',
      icon: 'success'
    });

效果就會更加生動了！

以上，我們實現了在 Angular 裡使用 sweetalert2 的方法，如果想了解更多設定及樣式，可以到 sweetalert2 的官方網站查看。

參考來源：

• How To Use Sweetalert In Angular 10
• Angular 10 Sweetalert2 Working Example