Angular Sweet Alerts

Pro Component

Our Angular Sweet Alerts are beautiful, responsive, customisable, accessible replacements for Javascript’s popup boxes.
Keep reading our Angular Alerts examples and learn how to use this plugin.

Usage

Initialization

In order to use this plugin on your page you will need to import swal in the component where you use the sweetalert:

import swal from 'sweetalert2';

Examples

<button
 class=" btn btn-primary"
 (click)="basicSwal()">
 Basic alert
</button>

<button
 class=" btn btn-info"
 (click)="infoSwal()">
 Info alert
</button>

<button
 class=" btn btn-success"
 (click)="successSwal()">
 Success alert
</button>

<button
 class=" btn btn-warning"
 (click)="warningSwal()">
 Warning alert
</button>

<button
 class=" btn btn-default"
 (click)="questionSwal()">
 Question
</button>

<!-- Typescript -->


  basicSwal(){
    swal.fire({
        title: "Here's a message!",
        text: 'A few words about this sweet alert ...',
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-primary'
    })
  }
  infoSwal(){
    swal.fire({
        title: 'Info',
        text: 'A few words about this sweet alert ...',
        type: 'info',
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-info'
    })
  }
  successSwal(){
    swal.fire({
        title: 'Success',
        text: 'A few words about this sweet alert ...',
        type: 'success',
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-success'
    })
  }
  warningSwal(){
    swal.fire({
        title: 'Warning',
        text: 'A few words about this sweet alert ...',
        type: 'warning',
        buttonsStyling: false,
        confirmButtonClass: 'btn btn-warning'
    })
  }
  questionSwal(){
    swal.fire({
      title: 'Are you sure?',
      text: 'A few words about this sweet alert ...',
      type: 'question',
      buttonsStyling: false,
      confirmButtonClass: 'btn btn-default'
    })
  }

Advanced

<button class="btn btn-primary" (click)="confirmSwal()">Confim alert</button>
<button class="btn btn-primary" (click)="timerSwal()">Timer alert</button>
<button class="btn btn-primary" (click)="imageSwal()">Image alert</button>

<!-- Typescript -->

confirmSwal(){
  swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      type: 'warning',
      showCancelButton: true,
      buttonsStyling: false,
      confirmButtonClass: 'btn btn-danger',
      confirmButtonText: 'Yes, delete it!',
      cancelButtonClass: 'btn btn-secondary'
  }).then((result) => {
      if (result.value) {
          // Show confirmation
          swal.fire({
              title: 'Deleted!',
              text: 'Your file has been deleted.',
              type: 'success',
              buttonsStyling: false,
              confirmButtonClass: 'btn btn-primary'
          });
      }
  })
}
timerSwal(){
  swal.fire({
      title: 'Auto close alert!',
      text: 'I will close in 2 seconds.',
      timer: 2000,
      showConfirmButton: false
  });
}
imageSwal(){
  swal.fire({
      title: 'Sweet',
      text: "Modal with a custom image ...",
      imageUrl: 'assets/img/theme/img-1-1000x600.jpg',
      buttonsStyling: false,
      confirmButtonClass: 'btn btn-primary',
      confirmButtonText: 'Super!'
    });