9.0.0 (2020-12-27)

⏫ Required minimal SweetAlert2 version is now ^10.8.0.

⚠️ 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!

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 `@Input`s 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 {
  }
}

sweetalert2/ngx-sweetalert2 v9.0.0 on GitHub