Angular 11/12 sweetalert example. In this tutorial, you will learn how to use sweetalert or sweetalert2 in angular 11/12 app for displaying sweetalert msg.
In this example, we will use angular sweetalert npm package for displaying sweetalert message like success message, error message, warning message etc in angular 11/12 app.
Sweetalert In Angular 12/11 App
Just follow the following steps and implement sweetalert in agnular 11/12 app:
- Step 1 – Create New Angular App
- Step 2 – Install Npm Packages
- Step 3 – Add Code on View File
- Step 4 – Add Code On Component ts File
- Step 5 – Start Angular App
Step 1 – Create New Angular App
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Step 2 – Install Npm Packages
In this step, you need to install sweetalert2 npm package for sweetalert beautiful alert in angular. so let’s run both command:
npm install --save sweetalert2
Then, add css file on angular.json file as like following:
angular.json
.... "styles": [ "src/styles.css", "node_modules/sweetalert2/src/sweetalert2.scss" ], ....
Step 3 – Add Code on View File
In this step, create simple three buttons for displaying sweert alert message like success, error, warning and alert messsages So, visit src/app/app.component.html and update the following code into it:
<h1>Angular 11 Sweetalert2 Examples - Tutsmake.com</h1> <button (click)="simpleAlert()">Simple Alert</button> <button (click)="alertWithSuccess()">Alert with Success</button> <button (click)="confirmBox()">Confirm Box</button>
Step 4 – Add Code On Component ts File
In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:
import { Component, OnInit } from '@angular/core'; import Swal from 'sweetalert2/dist/sweetalert2.js'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent implements OnInit { name = 'Angular'; ngOnInit(){ console.log('This is init method'); } simpleAlert(){ Swal.fire('Hello world!'); } alertWithSuccess(){ Swal.fire('Thank you...', 'You submitted succesfully!', 'success') } confirmBox(){ Swal.fire({ title: 'Are you sure want to remove?', text: 'You will not be able to recover this file!', icon: 'warning', showCancelButton: true, confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, keep it' }).then((result) => { if (result.value) { Swal.fire( 'Deleted!', 'Your imaginary file has been deleted.', 'success' ) } else if (result.dismiss === Swal.DismissReason.cancel) { Swal.fire( 'Cancelled', 'Your imaginary file is safe :)', 'error' ) } }) } }
Step 5 – Start Angular App
In this step, execute the following commands on terminal to start angular app:
ng serve php -S localhost:8001