web-dev-qa-db-fra.com

Comment utiliser sweetalert2 dans angular2

Obtenir cette erreur après le démarrage de npm dans un projet angulaire.

app/app.component.ts (12,7): erreur TS2304: Impossible de trouver le nom 'swal' . app/app.component.ts (21,7): erreur TS2304: Impossible de trouver le nom 'swal'.

J'ai créé un projet angulaire. Dans app.component.ts j'ai ajouté un code d'alerte douce 

export class AppComponent {
deleteRow() {
      swal({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then(function() {
      swal(
        'Deleted!',
        'Your file has been deleted.',
        'success'
      );
    })
  }
}

J'ai fait 

npm install sweetalert2 --save

et a également ajouté le chemin dans index.html

<script src="node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/sweetalert2/dist/sweetalert2.css">
javascriptangulartypescriptsweetalertsweetalert2
13
Akash Rao

La solution donnée par @yurzui est la seule mise au point avec angular2. J'ai presque tout essayé. Plunker peut partir. je le mets ici pour les autres:

Plunker

1) Ajoutez ces css et js au-dessus de votre index.html

<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/sweetalert2.min.css">

<script src="https://npmcdn.com/[email protected]/dist/sweetalert2.min.js"></script>

2) Ajoutez cette ligne au composant sur lequel vous voulez utiliser swal.

declare var swal: any;

Après ces modifications, mon espace de noms swal est disponible et je peux utiliser ses fonctionnalités.

Je n'ai importé aucun ng2-sweelalert2 ni aucun autre module.

20
user1501382

NPM installer SweetAlert2

npm install sweetalert2

Vous pouvez ajouter 

import swal from 'swal'; 
//import swal from 'sweetalert2'; --if above one didn't work

dans votre composant et vous pouvez commencer à utiliser comme dans votre composant.

swal({
  title: 'Error!',
  text: 'Do you want to continue',
  type: 'error',
  confirmButtonText: 'Cool'
})

Vous pouvez utiliser la grosse flèche pour maintenir cela.

deleteStaff(staffId: number) {
     swal({
          type:'warning',
          title: 'Are you sure to Delete Staff?',
          text: 'You will not be able to recover the data of Staff',
          showCancelButton: true,
          confirmButtonColor: '#049F0C',
          cancelButtonColor:'#ff0000',
          confirmButtonText: 'Yes, delete it!',
          cancelButtonText: 'No, keep it'
        }).then(() => {
        this.dataService.deleteStaff(staffId).subscribe(
          data => {
            if (data.hasOwnProperty('error')) {
              this.alertService.error(data.error);
            } else if (data.status) {
              swal({
                type:'success',
                title: 'Deleted!',
                text: 'The Staff has been deleted.',              
              })
            }
          }, error => {
            this.alertService.error(error);
          });
        }, (dismiss) => {
          // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
          if (dismiss === 'cancel') {
            swal({
              type:'info',
              title: 'Cancelled',
              text: 'Your Staff file is safe :)'
            })
          }
        });
    }

Dans angular-cli.json

"styles": [
            "../node_modules/sweetalert2/dist/sweetalert2.css"

        ],
"scripts": [
            "../node_modules/sweetalert2/dist/sweetalert2.js"
        ],
7
Velu S Gautam

La solution de @ user1501382 est parfois très pratique pour les packages purement JavaScript qui ne possèdent pas de définition de type, comme ce fut le cas pour SweetAlert2 jusqu'à il y a quelques semaines . De plus, l'utilisation de la variable globale swal n'est pas utile. très soigné et vous pouvez faire beaucoup mieux.

Maintenant que SweetAlert2 a les définitions de type, vous pouvez faire:

import swal from 'sweetalert2';

swal({ ... }); // then use it normally and enjoy type-safety!

Importez également le fichier CSS de SweetAlert, via un <link> ou autre. Lorsque vous utilisez un bundle de module tel que Webpack et que vous avez configuré css-loader et style-loader, vous pouvez également effectuer les opérations suivantes:

import 'sweetalert2/dist/sweetalert2.css';

</ s> Edit: cela ne devrait plus être nécessaire depuis SweetAlert2 v.7.0.0, qui intègre la construction CSS dans JavaScript et injecte les styles de la page à l'exécution.

De plus, je vous laisse découvrir ma bibliothèque, qui fournit aux utilitaires angulaires la possibilité d’utiliser SweetAlert2 avec aisance et classe: sweetalert2/ngx-sweetalert2 (c’est désormais l’intégration officielle de SweetAlert2 pour Angular)

Essaie!

6
Morgan Touverey Quilling

voici comment je l'utilise sur mes projets

npm install sweetalert2

après l'installation, ajoutez swal à window

window.swal = require('sweetalert2');

thats all . si vous rencontrez des problèmes avec css, importez simplement le fichier scss

@import "node_modules/sweetalert2/src/sweetalert2";

ou incluez le fichier css du répertoire node_module

0
Canaan Etai