Monday, July 30, 2018

Popup Notifications in Angular 6 with sweetalert

ngx-sweetalert2 with Angular 5 tutorials

angular 5 ngx-sweetalert example


ngx-sweetalert is an npm library which is a wrapper on top of sweetalert2 that allows to easily integrate into angular 4, 5 and 6 based applications. In this article, I Walkthrough the setup, the configuration for angular 5 application.

Installation and setup

Use npm to install sweetalert2 and ngx-sweetalert2 libraries
npm install --save sweetalert2 @toverux/ngx-sweetalert2
 
This will add below entries in package.json
"dependencies": {
    "@toverux/ngx-sweetalert2": "^4.0.0",
    "sweetalert2": "^7.26.9"
    }
 
and also install this dependency and create following folders in your project node_modules directory sweetalertangulardemo\node_modules\sweetalert2 sweetalertangulardemo\node_modules\@toverux\ngx-sweetalert2

Import SweetAlert2Module

First, you need to declare and import SweetAlert2Module into your main module. So that it will be available across of your application. app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { SweetAlert2Module } from '@toverux/ngx-sweetalert2';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SweetAlert2Module.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 

Usage in Angular 6 code base. 

This library allows us to make use of defined directives as well as with component. There are three ways to make use of different directives and components in your angular application.
  •  SwalDirective
  •  SwalComponent 
  • SwalPartialDirective 

SwalDirective example usage 

This is an attribute [swal] to an element where click happened. SO you have to add this swal attribute to a button. Swal attribute contains the string arrays which accepts format same like SweetAlertOptions [swal]={title:string,text:string,(type:string)}
swal("Simple Message");
 swal("Simplemessage!", "Title inserted hehre")
 swal("Sucess message", "Text here", "success");
 
swal attribute contains a type attribute which are possible values, success, error, warning, info, input.

SwalComponent example usage

This component is to be used when there are too many options needs to pass in swal attribute array. This will be useful for advanced use cases.
<swal #confirmFileDeletionSwal 
            title="Are you sure want to delete it?" text="Delete record" type="warning"
            [options]="{ showCancelButton: true,  confirmButtonText: 'Yes, deleted!',  confirmButtonColor: '#DD6B55' }"
            (confirm)="confirmDeleteFile()"
            (cancel)="fileNotDeletedSwal.show()"></swal>

 
you can call this swalComponent by using id or swal attribute
<button (click)="confirmFileDeletionSwal.show()">
        Delete the  file
      </button>
 
or
<button [swal]="confirmFileDeletionSwal">
        Delete the file
      </button>
 
In the typescript component, you can access the component like this
class AppComponent {
  @ViewChild('confirmFileDeletionSwal') private confirmFileDeletionSwal: SwalComponent;
}
 

SwalPartialDirective directive

This is basically used angular templates with sweetalert code. Basically, some popup components are replaced with views. You can use ng-container with swal component to achieve this. Examples app.component.html
<div class="example">
  <button id="button1" [swal]="['Simple Message']">Simple Message popup</button>
  <button id="button2" [swal]="['Simplemessage!', 'Title inserted hehre']">Message popup with title under it</button>
  <button id="button3" [swal]="['Success', 'Text here', 'Success']"> Successful popu message</button>
  <button (click)="confirmFileDeletionSwal.show()">
 Delete the imaginary file
  </button>
  <swal #confirmFileDeletionSwal 
            title="Are you sure want to delete it?" text="Delete record" type="warning"
            [options]="{ showCancelButton: true,  confirmButtonText: 'Yes, deleted!',  confirmButtonColor: '#DD6B55' }"
            (confirm)="confirmFile()"
            (cancel)="fileNotDeletedSwal.show()"></swal>
</div>
 
typescript component contains the below code
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'sweetalertangulardemo';
  public constructor(public readonly swalTargets: SwalPartialTargets) {
  }

   public confirmFile(): void {
    this.deleteFile()
      .then(() => this.fileDeletedSwal.show(), () => this.fileDeletionErrorSwal.show())
      .catch(swal.noop);
  }
  
  public deleteFile(): Promise {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve()), 2000);
    });
  }
}
And the output of the above code is as seen in the below screenshot Angular 6 sweetalert integration with example Hope you liked my posts. Please like or share this in facebook/twitter.


EmoticonEmoticon

Note: Only a member of this blog may post a comment.