toaster notification in angular 14 | implement toast alert using ngx-toastr library

today I'm going to explain how to implement this toaster notification in angular 14. so the library I'm going to use this ngx toaster and here I listed out all the steps we can go one by one the steps are very easy and very straightforward only so I will provide the complete documentation about this ngx roster in this video okay so the first thing is we have to install these packages so let me copy this one npm install ngx toaster so already I'm having this created application let me go to the new terminal here I am going to execute this command so it will take some time to install the packages and once it's done we have to include the CSS okay our installation gets completed so we can see in this changes packages so this ngx toaster version 15 is installed so now let me go to this angler.json file so in this style section we already have some CSS so let me include our CSS also the third step is we have to import this model so in our application let me go to this app dot model so here let me import it first from ngx toaster and our model name is toaster model okay then I'm going to include in our import section so some Global configuration we can manage here So currently I'm not going to provide any value so I will explain it later and also I am going to create all new component NC generate component procure component is created let me go to this TS file so in this Constructor I am going to inject this toaster services okay if it is not coming we have to import it manually so let me include here so then I'm going to create one function so success so here I am going to use this injected toaster alert for the success here I am going to provide the message okay fine so then in this HTML site I'm going to change this one into H1 and then let me create one button name is success here I am going to add some Style matte rest button so let me save it and then I'm going to take this selector so in our app command let me include this one so we have installed these packages so let me rerun my application so any package you are installing you have to restart it that is the better practice okay this is running now let me verify it so when I'm clicking this access okay I'm not getting anything yes actually I have created uh this function but I am not binded so let me do it so let me click this one so see uh we are able to see this alert so here we are seeing this messages the same time we can include some title also let me show you so first we have included these messages next I am going to include this title so let me save this one I'm going to click this button once again see now we are able to see this title and also this message slide so the similar way I am going to create one more button so the next one is for error and the third one is for warning and the final one is for info and the same way I'm going to change these colors so before that let me create some custom CSS here next I'm going to create for this dancer okay we have created now let me go to this HTML site so the first one is success and the second one I am going to use this Danger and that add-on is warning already we have this one class so let me reuse it so under the file node I'm going to have this primary only now I'm going to change this functions also first one is error burning and the final one is info okay so let me Define all the functions one by one error then this warning and the fine loan is info so let me change the text also toaster error testing and the third one is I am going to provide this warning testing so the final one is info testing so totally we have this four colors foreign and this is fine now I am going to click this access okay I'm getting this access notification now let me click this error okay here also I'm getting this cream so let me check this function yes so instead of this success we have to use this error at the similar way we have to use this warning and the final loan is info see now we are getting this error message with this icon and the third one is warning so we are getting this warning and the final loan is info okay we are getting this in this blue color so next we have to see this customization So currently we are getting these alerts in this uh top right corner so instead of that let me change the position so that we can handle in This Global manner so in this app dot model already we have imported this toaster model here I am going to use this class position class so the value I'm going to provide toast top left okay so see now so it's coming in this left top corner so the similar way instead of this top we can use this bottom now if I'm clicking it is coming this bottom so it is applicable for all the notification even if I am clicking this warning also it will come like this and if you want everything should be in the center then you have to prove it like this sender if you provide left it will go for the left side so I am going to provide both the thing as the center okay now if I'm clicking it exactly it is coming in the center point okay and if I'm clicking multi times so the same notification is coming for many times so that also we can prevent so we have one option is called prevent duplicates so let me make this one as the true so now I am clicked this one if I'm trying to click multiple times it won't come so now if I'm click this error so actually I'm clicking many times it is coming only one time and then this duration so I just clicked it will show in this five seconds right so after that it will be closed so instead of that if you want extra to the time also so you can use this timeout option here I am going to provide this 3000 okay then it will be closed in three seconds okay it is closed so in case if I'm extending this value it will wait that much of time then it should be close to okay the next thing is animation so for that we have the option is called easy so the value should be is in and then this easing time so we can provide some value okay let me save this one see now actually I'm clicked it is taking very long time and it is closed smoothly so let me change this value see now it is coming slowly and then the same way it is closed okay this is all about this notification option So currently I have applied this configuration for in this common manner so the thing we can apply for this integer places also let me show you so here I just removed this easing option so if I'm clicking it is coming in this normal manner okay and now in our component side what I'm going to do so let me take this so messages here I'm going to pass one more parameter of the object so in this individual call also we can assign these properties so let me save this one so now I am clicking this one see now it is coming very slowly and disclosing slowly so the same time if I'm clicking this I error it is coming quickly so now we are able to see the difference right so actually I'm clicked to three things but I'm clicking this one it is coming very slowly because we are applied for this individual curve okay now we are in the good shape now let me move on some customization so for the testing purpose we are using all the notification in this single component but in the real time application we have to reuse the functions in the different places so better approach what we can do let me create one services NG generate services and already we have unfolded is called a service yes so let me create inside this folder and our service name is Notifier okay great our services creator so what I'm going to do so let me inject this our toaster Services here okay it's added so let me copy all of our functions from our Notifier itself and then I am going to include everything in our Notifier services let me change this on also a toast so instead of adding directly I am going to have two parameters first one is title and the next one is message so let me copy these two things I'm going to add for all the methods and then we have to pass these parameters here so the first one should be message and the second one should be our title right so the same thing I am going to apply for all of our functions then if you want to place some individual configuration also you have to add like this So currently we are included for this access the similar way we can add for this alert or warning and info also so anyway let me keep it like this now I am going to this our notified component so instead of this toaster Services I am going to use for our Notifier Services okay and here I'm going to use so success so the first tone should be title and the second one should be messages okay now we are good so now let me click this success okay we are getting this one and then and then this error and this warning and find lower info also so everything it is working fine so Hereafter so I need to use this same alert for some other places also again use it so let me take my another function I mean this multiform okay okay it is coming for every places so I'm going to include this component also in this router side send this app routing model so let me copy this one in our app component so let me remove this one so instead of that I can include here okay it's fine so now in this multi form so I'm going to include the same notification so let me go to this multiform site so after this handle Summit currently we're not injected in services so let me inject our notification service here notification services so let me take this one so after our Summit I am going to call this one so success and our titles employee at the message saved saved successfully so let me save it I am providing some value here says you know I'm getting the salad the similar way we can reuse all of our notification in this different components okay so now we are in the end of the video still if you have any dots or clarification please post in the comment box and also please don't forget to subscribe my channel so in this source code I will upload in the GitHub I will share that link also in our description you can use it so let me do one small changes before uploading this one into our GitHub and this duration also I am going to provide on big value so see now it is looking some uniform manner see now all the alerts are showing in this single place thank you thanks for watching

Channel: Nihira Techiees

Views: 12,351

Keywords: traditional notification in angular 14, toaster notifications in angular, toaster alert in angular, ngx-toastr library documentaion, how to implement toast alert in angular 14, configure toast notification in angular 14, steps for implement toast alert in angular, how to implement alert in angular, how to apply animation for toastr notifications, how to change the position for toastr notifications, how to prevent the duplicate notification in toast alert, angular 14 full course

Id: 8WUeIiIQ5ss

Length: 21min 22sec (1282 seconds)

Published: Mon Oct 17 2022