ng-sweetalert2 as simple as alert

angular_swal.md

simple SwalPortalDirective

The following example demonstrates a simple Swal with a button. In this example, you could provide more HTML within your HTML component rather than binding the HTML to an [html]. You would still need to import the SwalPortalTargets in your component.

import { SwalPortalTargets } from '@sweetalert2/ngx-sweetalert2';
export class MyComponent {
  public constructor(public readonly swal_targets: SwalPortalTargets) { }
  submit() { console.log("submit is clicked") }
}

Here, the container with swalPortal directive's value is the target's content:

<button [swal]="swal_portal" (confirm)="submit()">
  Swal button
</button>

<swal #swal_portal title="Swal Title" icon="warning">
  <ng-container *swalPortal="swal_targets.content">
    Please press <b>OK</b>?
  </ng-container>
</swal>