Angular: How to Create Subscribe Custom Alert Services

In this article we’ll learn how we can create subscribe based custom alert services using Angular 8.

Prerequisites:

1. Prior knowledge of typescript.
2. Prior knowledge of JavaScript.
3. Prior knowledge of HTML & CSS.
4. Visual studio code.
5. A development machine with Node 8.9+ & NPM 5.5.1+ installed.

Step-by-step tutorial of Creating Subscribe Alert Services using Angular

Step 1: Installing Angular CLI 8

First step, where we’ll have to install latest version of Angular CLI

$ npm install -g @angular/cli

Step 2: Creating your Angular 8 Project

In this second step, we will use Angular CLI to start our Angular Project

Go to CMD or Terminal and use this command:

$ ng new custom-loader

This CLI will ask you “whether you would like to add Angular routing” Say Yes.

It will ask “which stylesheet format you would like to use”. Choose CSS.

Now your project is ready Angular CLI will generate required files and folders along with NPM packages and routing too.

After that open your project in Visual studio code and go to your root folder and run the local development server using below command:

$ npm start

step of creating project in angular 8

Now run localhost:4200/ in your browser

Step 3: Add services as Alert.services

$ ng generate services alert

Step 4: Add new component as Alert

$ ng generate component alert

Step 5: Add below codes into it

• Add below code in alert.component.html

• Add below code in alert.component.ts

• Add below css code into alert.component.css

Step 6: How to use this services?

• Add below code in your appropriate component.html page whenever you want to use

Now check how to use this services

• For success message:

this.alertService.success("Yeah !!!! You got message successfully");

• For warning message:

this.alertService.warning("Oh !!!! Plz check double");

• For error message:

 this.alertService.error("Ooopss !!!! Something went wrong");

• For informative message:

this.alertService.info("Yepp !!! This is a important information");

• How to clear message?

this.alertService.clearAlertMessage();

I have used services something like below

GIF Animation of Custom Alert Services

Over to You!

Looking for a Sample Source Code? Here you go: GITHUB.

Today you have learn how to create custom dynamic loader on HTML Element using Angular 8. If you have queries about tutorial, please ask our Angular Developers via GitHub Profile. OR Put your Comment Below

That’s it for now. Stay Connected for more tutorials, until then Happy Coding…

Related Development Resources

• Solution for Angular IE Error: Uncaught (in promise) Loading chunk.
• Angular: Create Custom Dynamic Loader OR Spinner on HTML Element