Hello friends, today in this tutorial we will be integrating the suite alert 2 library in
order to display popup display messages inside your angular 13 application. So you will see this is the alert message, success alert message
So basically if you click on ok it will go. So I will be telling you how to integrate it
So we will be using this library suite alert 2. So if you just search on npm, this is the library that we are using here
So if you want to, you can see this is the library 407000 weekly downloads are there
If you want to follow along with this tutorial, I have given all the source code in the video description
This is the step by step tutorial where all the source code is given alongside with instructions
So we will be having success dialogue, error dialogue or simple hello world
So now let's get started. So first of all, inside my project directory, I will make a new directory which will be
angular popup. I will go into this directory and open visual studio code text editor
So here first of all guys what you need to do is that you need to initialize your angular project
So we have given this name. So it will ask for you whether you want routing
So we will press n. We will use css. So now it will install these packages and it will take hardly 5 to 10 seconds
So I will be back whenever it is done. So now guys you can see all these dependencies are installed
So here first of all, we need to install this module which is npmi
Then just write here suite alert 2. So install this package. So now after installing it, you need to go to your angular json file
So this is a file here which is a top level file angular.json
So here inside this style tariff, we need to add a line
So just put a comma and add this line which is node underscore modules and inside this
there is a folder which is suite alert 2 and you need to include the source also and this
suite alert 2 dot staff file which is dot fcss. So just write this line here in this array
After that close this file and here we will now move to the app.component.html file
So we will launch this application. So just write ng serve. So here we need to go to the directory here which is angular popup. Sorry
So this is a project directly. Let me go. Sorry angular project
cd angular project. So this is a directory here you need to install this package and here my suite alert 2
So now install this inside this directory inside your project directory
So now it is installed. So right here inside your app.component delete all this code
So now if I launch this application by ng serve. So it will start this application at port number 4200
So here we need to write something here. So we can give it h1 heading
So we will say simply angular 13 suite alert 2 popup message examples
So here we will have three buttons. The first button will be simply a simple alert message
The second button will be of success alert with success. And the third button will be the confirm alert message
These are the three types. You can read more about it using that library suite alert 2
And if you just see here it is compiled successfully. So we can launch this application localhost 4200
So you will see three buttons are there. So when we press these buttons the messages must show
So now we will bind on click event handler. So each of these buttons
So when we click the first button we need to invoke this function which is simple alert
So we will make this function. And for the second button we will again have the event handler
So this will be alert with success. And lastly for the third button we will again have confirm box
So these are three methods we need to declare here inside your app.component.ts file
So right here. So first of all we need to define our simple alert method
Which we define inside our this button here simple alert. So we are defining here
So when we press this button we need to invoke swell library
So we need to import this. So this will automatically import it from this suite alert 2 library
So just add this line at the very top. So here we will use our .fire method
And here you can just say hello world. Simple. And let me just delete this two buttons here
And just show you this first button is it working or not. So now if I click this button you will see this hello world message printed out
And it is containing the ok button. So if you click it the message will go
So simple ok button. And you can also customize the message. You can just provide any message of your choice
You can see. So this is a simple alert message. And now we will add these two buttons once again
So now we will write the second function which is alert with success
So this will now show the alert with success. The second is guys again we will use the same method fire
And here we will change the text to thank you. And put a comma and here you can provide the option
The second parameter you submitted successfully. And the third parameter you will provide that this is a success message
So here you will say success. Just write here in a string value just write success
So now this will become a success button. So again let me delete the third one
So you will see if I click it this nice animation green animation will come
It is a tick mark and it will say thank you you submitted successfully
And ok button is there. So this is very much useful when you are taking some kind of input from a user or you are submitting a form
So you should be having to display some kind of success alert message
So in those situations you can use this library inside your Angular application
And lastly if you want to take some input and confirm it you have this confirm box method
So now we will write the third method. So it is confirm box
So inside this once again we will use the same method conspire method
So this takes the object type. First of all we will have a title property
So here we will ask him for a statement from the user
Are you want to remove this item? We will post a question
And we will also provide a text property. You will not be able to recover this file
And put a comma once again and here you can display icon also
We will display the icon of warning. And there is a show cancel button property
All these properties are there you can see show confirm button, show close button
So show cancel button you will put this to true. You can play with these you can also put it to false
So cancel button will be shown to the user and the confirm button text
So this will be equal to just delete it. Put a comma once again and a cancel button text
So here we will say no keep it. Put a comma and lastly guys we will have this returns a promise
So we will use make use of the dot 10 syntax. And inside this you will get the result which the user has selected inside this fashion
We call that function arrow function. So here we will compare the value if result.value is a value is there
In that case we will fire that. Again we will use the fire method
And here we will say delete it. And put a comma second argument
Your file has been deleted and a success message in that scenario
We can display like this. And in the else if the user hasn't selected to delete the file in that scenario we can
We will have this else's. I will say the result is triple equal to
swell.definite reason.cancel If the user has cancelled it
So this condition will always return false in the time. Guys let me see
If you go to the video description link I have written that code
So you will find this code here right here. So we are writing this stuff here
So from that let me just copy it. This is the code here
So whenever the user has selected delete the file you will see the success alert message
If not then we will compare it and we will be displaying the error message
Your file is safe. So now if you refresh the application confirm alert message
It will show you a warning message to you. So I want to remove the file
We have deleted or no keep it. So if I click yes delete it
Success message will be shown. Your file has been deleted. If I select the second option then I will see this error message cancelled
Your imaginary file is safe. So there are also error messages also shown to you with icon
So this is a very famous library fluid alert tool. With the help of this you can display pop-up alert messages with icon sensor
With great animation inside angular 13 application. And simple error box you can also display it
So all such examples I have shown you in this video with all the source code
And I have shown you the steps required. So if you want to download all the source code you can go to the video description link
And please hit the like button subscribe the channel. And I will be seeing you in the next video