Reputation:
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
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
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
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
Upvotes: 0
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;
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
Reputation: 4934
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.
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.
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