Detharion

Posted 10 months ago

Notify service with Angular 5.

View Profile

How to create an notify service using alertifyjs in angular 5.

Sometimes when you are building your own platform, you'll need to notify users about error or success messages or in some cases you'll need to display some kind of confirmation popup to perform an action. Create a service like that  is easier than ever using angular 5 and libraries like http://alertifyjs.com/.

Let's begin.

First, we need to install alertifyjs in our angular project.

npm install alertifyjs --save

or

yarn add alertifyjs

Now, we need to add the alertifyjs css files  into the cli file.

We also we'll need to add the following code below to the scripts section.

"../node_modules/alertifyjs/build/alertify.min.js""

Then we have to create our service file in order to use our notify service everywhere in our project.

ng generate service services/alertify

or

ng g s services/alertify

Once our service is created we'll have to import the library and create the methods.

In order to use alertify package we'll need to import it like this:

declare let alertify: any;


Almost there, I promise.

We need to import our service file into the app.module.ts in order to use it everywhere.

Now, if we want to use our service in one of our component, we just need to import the service into the constructor and then we can use the method that we want like this:


mycomponent.component.ts

Remember to import AlertifyService on the top of the file.

constructor(private alertify: AlertifyService) { }
this.alertify.success('Tutorial successfully completed'); 

So now we have completed our notify service and we can even export it to use it on other projects as well.

Must be logged in to comment
Notify service with Angular 5. / Welcome to Signl