Declarative, reactive, and template-driven SweetAlert2 integration for Angular
animation param was removed, please use showClass and hideClass instead. showClass: {
popup: 'swal2-noanimation',
backdrop: 'swal2-noanimation'
},
hideClass: {
popup: '',
backdrop: ''
}
Use Angular v12: https://github.com/angular/angular/releases/tag/12.0.0
Use SweetAlert2 v11: https://github.com/sweetalert2/sweetalert2/releases/tag/v11.0.0
:arrow_double_up: Required minimal SweetAlert2 version is now ^10.8.0.
:warning: BREAKING CHANGES: A few symbols (properties, methods...) were renamed, inducing breaking changes, so please take a look a the Migration guide section.
Check out our new wiki recipes to use ngx-sweetalert2 better!
Although version 8 could run SweetAlert2 v10, it did not expose new SweetAlert2 APIs concerning the new, optional, Deny button. Attention, version 9 is no longer compatible with SweetAlert2 v9 and prior.
Release notes for SweetAlert v10
A third button was added alongside the classic Confirm and Cancel ones: Deny. Useful in some UX scenarios, you can now use it with ngx-sweetalert2.
Here are the new @Input properties of SwalComponent (<swal>) controlling it:
[showDenyButton]: If set to true, the “Deny” button will be shown, which the user can click on to deny the popup.[denyButtonText]: Use this to change the text on the “Confirm” button.[denyButtonColor]: Use this to change the background color of the "Deny" button.[denyButtonAriaLabel]: Use this to change the aria-label for the “Deny” button.[focusDeny]: Set to true if you want to focus the “Deny” button by default.[preDeny]: Function to execute before denying, may be async (Promise-returning) or sync.A new @Output, (deny), was added too on both SwalComponent (<swal>) and SwalDirective ([swal]), so you know when the deny button was clicked.
Here's an example using all three buttons' outputs, were the user is asked to either save a file, abandon changes (deny), or cancel (do nothing):
<button
[swal]="{ title: 'Save file as...', input: 'text', showDenyButton: true, denyButtonText: 'Don\'t save', showCancelButton: true }"
(confirm)="saveFile($event)"
(deny)="handleDenial()"
(dismiss)="handleDismiss($event)">
Save
</button>
Also, a new SwalPortalDirective (*swalPortal) target was added for the deny button:
<ng-container *swalPortal="swalTargets.denyButton">...</ng-container>
@Inputs from SweetAlert2 v10 onwardsAdded the following @Input properties to SwalComponent (<swal>):
[iconColor]: Use this to change the color of the icon.[loaderHtml]: Use this to change the HTML content of the loader.[inputLabel]: Input field label.[returnInputValueOnDeny]: If you want to return the input value as result.value when denying the popup, set to true.(cancel) to (dismiss)To match current SweetAlert2 terminology, we renamed the (cancel) @Output() to (dismiss) on both the component and the directive:
<button
[swal]="[...]"
- (cancel)="handler()">
+ (dismiss)="handler()">
<swal
- (cancel)="handler()">
+ (dismiss)="handler()">
.dimiss() to .close()To match current SweetAlert2 terminology, we renamed the SwalComponent (<swal>) .dimiss() method:
class MyComponent {
@ViewChild('mySwal')
public mySwal!: SwalComponent;
public doSomething(): void {
- this.mySwal.dismiss();
+ this.mySwal.close();
}
}
SweetAlert2 v10 modal lifecycle hooks have been renamed for a much more coherent naming scheme, so we renamed our @Outputs too.
<swal
- (beforeOpen)="handler()"
+ (willOpen)="handler()"
- (open)="handler()"
+ (didOpen)="handler()"
- (render)="handler()"
+ (didRender)="handler()"
- (close)="handler()"
+ (willClose)="handler()"
- (afterClose)="handler()"
+ (didClose)="handler()"
- (destroy)="handler()">
+ (didDestroy)="handler()">
</swal>
If you use modal lifecycle event interfaces in your modal lifecycle output handlers, you will again have to rename them to match the new naming scheme:
class MyComponent {
- public myBeforeOpenHandler(event: BeforeOpenEvent): void {
+ public myWillOpenHandler(event: WillOpenEvent): void {
}
- public myOpenHandler(event: OpenEvent): void {
+ public myDidOpenHandler(event: DidOpenEvent): void {
}
- public myRenderHandler(event: RenderEvent): void {
+ public myDidRenderHandler(event: DidRenderEvent): void {
}
- public myCloseHandler(event: CloseEvent): void {
+ public myWillCloseHandler(event: WillCloseEvent): void {
}
}