やっほー
【Angular】alertをカスタマイズ!SweetAlertの使い方!

【Angular】alertをカスタマイズ!SweetAlertの使い方!

  • 2019年3月2日
  • 2021年3月19日
  • Angular
  • 26view

Angularでカッコイイalertを使いたい

というのも、デフォルトのalertってちょっとダサいと思うのですよ。

ということで今回は、「Angular×SweetAlert」の解説をしたいと思います!

最初に言っておくと。。

SweetAlertってなぜか色々種類があります。

今回は、「angular-sweetalert-service」と「sweetalert」を入れてみましたが、「angular-sweetalert-service」の方はうまく動かないです。。

なので、「sweetalert」の方から試すと良いですよ!

angular-sweetalert-serviceをインストール

angular-sweetalert-service」をインストールします。

 

app.module.ts」に「SweetAlertService」を追加します。

 

アプリをサーブするとエラーが。。「rxjs/Observable」が解決できないって言ってます。

 

調べてみると上記コマンドが有効なようなので、「rxjs-compat」をインストールします。念のため再サーブします。

 

angular-sweetalert-service

ワーニングが出ていますが、エラーは消えました。

一旦これはOKとします。

 

使用したいコンポーネントのTypeScriptに「SweetAlertService」をインポートします。

公式は「angular-sweetalert」になっていますが、間違いです。

 

SweetAlertService」をDIします。

 

実際に使ってみると、超エラー出ます。諦めます。。

sweetalertをインストール

全然だめなので、こっちの「sweetalert」をインストールします。

 

使用したいコンポーネントのTypeScriptに「sweetalert」をインポートします。

 

こんな感じで使います。

 

sweetalert

これで完璧!

参考サイト

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

まとめ

なんかうまくいかないライブラリとかって多いですね。。

まあ、メンテされていないものも多いので注意が必要ですな。

ではまた!

【Angular】alertをカスタマイズ!SweetAlertの使い方!
フォローしてもらえると泣いて喜びます