Day 20：怎麽在 Angular 使用 sweatalert2

由於在未来的专案有机会使用到 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