CODEWITHSUNDEEP
javascriptjquerysweetalert
user3325783
user3325783

Reputation:

Using Sweet alert with Typescript class

I have a method inside a typescript class that just looks like this 

    var confirmation = confirm("Run Agent Job?");
    if (confirmation) {
        console.log('yes');
    } else {
        console.log('no');
    }

I'm trying to convert this to use Sweet Alert, so inside the method I just put this. But Typescript doesn't recognize this It throws a Cannot find name swal

swal("hello");

I have imported sweet alert as follows

<link href="~/Content/css/sweetalert.css" rel="stylesheet" />
<script src="~/Scripts/sweetalert.min.js"></script>

What am I doing wrong? If I try to use swal() in just a plain *.js file, it'll work fine. It's only when it's in a *.ts file.

Upvotes: 7

Views: 24518

Answers (5)

Michele Massari
Michele Massari

Reputation: 145

We can't use the function swal({...}) but we can use the second overload of Swal.fire({...}) method, casting the parameters to SweetAlertOptions... My code looks like this...

import Swal, {SweetAlertOptions} from 'sweetalert2';
Swal.fire({
        title: 'Are you sure?',
        text: 'You won\'t be able to revert this!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, delete it!'
      } as SweetAlertOptions).then((result) => {
        if (result.value) {
           //Do something here
        }
      });

Upvotes: 3

Ankit Singh
Ankit Singh

Reputation: 347

Typescript

In this way working for me, I am using angular 7 and sweetalert2.

Installation

  • npm install sweetalert2

OR

  • <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

.ts

   openDateDialog() {
    swal({
      html: '<h1>Sweet2 with angularJS</h1>',
      showConfirmButton: true,
      customClass: 'swal2-overflow'
    }).then(function(isConfirm){ if (isConfirm) {
      console.log('confirm, do any function');
    } else {
      swal("Cancelled", "Your imaginary file is safe :)", "error");
    }});
  }

.html

<mat-select [(value)]="dateselected" (selectionChange)="onChangeDate(dateselected)">
            <mat-option value="0" (click)="openDateDialog()" >Sur-Mesure</mat-option>
            <mat-option value="thisMonth" >Ce mois-ci</mat-option>
            <mat-option value="all" >Toute la période</mat-option>
          </mat-select>

Upvotes: 0

H&#233;ctor Gallegos Casta&#241;eda
H&#233;ctor Gallegos Casta&#241;eda

Reputation: 1

You have to import this in top of your class:

import Swal from 'sweetalert2/dist/sweetalert2.js'
import 'sweetalert2/src/sweetalert2.scss'

and don´t forget to add this in your app.module.ts file

enter image description here

Upvotes: 0

Zze
Zze

Reputation: 18865

In addition @TomAalbers answer, there is a bug with Angular 5 and sweetalert which will also cause this error. If you are using angular 5, then you can't use:

import * as swal from 'sweetalert';

Instead you need this ugly work around:

import * as _swal from 'sweetalert';
import { SweetAlert } from 'sweetalert/typings/core';
const swal: SweetAlert = _swal as any;

Credit where it's due

This seems to be related to this bug in Angular CLI where default exports are handled differently in dev. They seem to have fixed it in v6.0.0-beta.4

Upvotes: 2

Tom Aalbers
Tom Aalbers

Reputation: 4934

Typescript

I got it to work with typescript the following way. In the top of your .ts file use:

import * as swal from 'sweetalert';

Then use the function like this

swal({
  title: "Are you sure?",
  text: "You will not be able to undo this action",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  closeOnConfirm: true
},
confirmed => {
   if(confirmed) {
       // Do what ever when the user click on the 'Yes, delete it' button
   }
});

You can find more examples in the docs.

Installation via npm and typings

I installed the sweetalert package the via npm

npm install sweetalert --save

and the typings

// the old way
typings install dt~sweetalert --save --global 

// new way
npm install --save @types/sweetalert

After this, make sure you have included the js and the css file in your index.html.

If you get the following error 

swal(..) is not a function

then you have not included the js file properly.

For aurelia CLI users

You can add the following to your aurelia.json. 

      {
        "name": "sweetalert",
        "path": "../node_modules/sweetalert",
        "main": "dist/sweetalert.min",
        "resources": [
          "dist/sweetalert.css"
        ]
      },

and in app.html use

<require from="sweetalert/dist/sweetalert.css"></require>

Upvotes: 8

Related Questions