Releases: sweetalert2/ngx-sweetalert2
v12.4.0
v12.3.0
v12.2.0
v12.1.0
v12.0.1
v12.0.0
v11.0.0
11.0.0 (2022-02-27)
Features
- publish Ivy-only build (6a80988)
BREAKING CHANGES
- If you application still uses View Engine, it won't be able to use ngx-sweetalert2. Otherwise please note that the library remains compatible with Angular 12 (Ivy-enabled). This change allows to speed up compilation preparation time on Ivy-enabled apps, and is now recommended by the Angular guidelines.
v10.0.0
10.0.0 (2021-05-15)
BREAKING CHANGES
- The depracated
animationparam was removed, please useshowClassandhideClassinstead.
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
v9.0.0
9.0.0 (2020-12-27)
⏫ Required minimal SweetAlert2 version is now ^10.8.0.
Check out our new wiki recipes to use ngx-sweetalert2 better!
- 🔌 All possible ways of firing a modal and controlling its visibility
- 🔧 Setting global defaults (SweetAlert2 mixins)
- 🎨 Use a theme from @sweetalert2/themes (and or customize SCSS variables)
What's new
🔟 SweetAlert version 10
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
✋ New Deny button support
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>🔧 Added a few new @Inputs from SweetAlert2 v10 onwards
Added 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.
Migration guide
🔴 Rename SwalComponent and SwalDirective output (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()">🔴 Rename SwalComponent method .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();
}
}🔴 Rename modal lifecycle hooks
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>🔴 Rename modal lifecycle event interfaces names
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 {
}
}