Usando SweetAlert2 com Angular 4

Neste artigo eu vou mostrar como usar o sweetalert2 com o angular 4

O sweetalert2 é um pequeno componente que pode ser usado para apresentar mensagens na UI da sua aplicação em substituição ao pop-up de alerta do browser convencional.

Iniciando um novo projeto

Para esse exemplo vamos criar uma aplicação com o angular/cli e adicionar os modulos necessários.

Instala o angular/cli caso você ainda não tenha ele instalado.

$ npm i -g @angular/cli

Criamos um novo aplicativo a partir do console.

$ ng new sampleSweetAlert

Use um editor de texto de sua preferencia para editar os arquivos eu uso o Visual Studio Code.

$ cd sampleSweetAlert
$ vscode ./

Incluido dependencias

Para esse projeto alem do sweetalert2 vou usar também o bootstrap para facilitar a estilização do aplicativo.

$ yarn add bootstrap@3 sweetalert2

Codificando

A primeira coisa é alterar o arquivo .angular-cli.json para adicionar os css tanto do bootstrap quanto do sweetalert2 conforme a imagem abaixo.

Arquivo .angular-cli.json

O próximo arquivo que temos que alterar é o app.components.ts que vamos incluir o modulo do sweetalert e dois metodos que vamos usar para apresentar as mensagens na UI. Altere o arquivo conforme imagem abaixo.

Arquivo app.components.ts

O último arquivo a alterar é o app.componets.html que é o arquivo que vamos colocar nosso html, altere todo o arquivo conforme imagem abaixo.

Arquivo app.componets.ts

Uma vez finalizada a edição do projeto agora é executar e testar. Para testar basta executar o ng serve na linha de comando e acessar o projeto no browser no endereço http://localhost:4200/.

$ ng serve

Para saber todas as opções do sweetalert2 acesse o site oficial do projeto para uma lista completa de todas as opções de caixa de mensagens disponíveis na biblioteca.

Para uma melhor compreensão eu deixei uma copia desse projeto no meu github para acessar clique aqui.