月間18,000PV達成! 収益は毎日発生中! 記事は毎日更新中! ギランバレー症候群に関する情報を集めています

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

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

 

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

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

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

 

 

僕の環境

OS:Windows10

Angular:7

 

 

最初に言っておくと。。

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します。

 

 

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

 

 

Advertisement

 

sweetalertをインストール

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

 

 

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

 

 

こんな感じで使います。

 

 

sweetalert

これで完璧!

 

 

参考サイト

■angular-sweetalert-service

URL:「https://www.npmjs.com/package/angular-sweetalert-service」

■sweetalert

URL:「https://sweetalert.js.org/guides/」

 

 

おすすめ書籍

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

 

 

 

まとめ

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

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

ではまた!

Travelerを知らないの?