Description

A BEAUTIFUL, RESPONSIVE, CUSTOMIZABLE, ACCESSIBLE (WAI-ARIA) REPLACEMENT FOR JAVASCRIPT'S POPUP BOXES.

NPM

Install sweetalert2 using npm

sweetalert2

npm install sweetalert2 --save

Dependencies

No Dependencies for this module.

Includes

Include css file in angular.json file inside styles":[ ]

path

../node_modules/sweetalert2/dist/sweetalert2.min.css

UI-Components Module

Add SweetAlertsComponent into your UIComponentsModule class. ui-components.module.ts would look like this


import {NgModule} from '@angular/core';
import { SweetAlertsComponent } from "./extra/sweet-alerts/sweet-alerts.component";

@NgModule({
declarations: [SweetAlertsComponent],
providers: [ ]
})
export class UIComponentsModule { }

Sweet Alert Markup

sweet-alerts.component.html would look like this 


<button type="button" class="btn btn-primary btn-block" id="basic-alert" (click)="basicAlert()">Basic </button>

Sweet Alert Component

Import sweet-alerts.ts data file in SweetAlertsComponent class. sweet-alerts.component.ts would look like this 


import { Component } from '@angular/core';
import * as alertFunctions from '../../../shared/data/sweet-alerts';

@Component({
    selector: 'app-sweet-alerts',
    templateUrl: './sweet-alerts.component.html',
    styleUrls: ['./sweet-alerts.component.scss']
})


export class SweetAlertsComponent  {
    // Basic Alert
    basicAlert(){
        alertFunctions.basicAlert();
    }
}

Sweet Alert Data

sweet-alerts.ts would look like this 


import swal from 'sweetalert2';

// Basic Alert
export function basicAlert() {
    swal.fire("Here's a message!");
}