JavaScriptAngularJSAngular Notification Message Component

Angular Notification Message Component

Today, I am going to share a very simple angular component to display alert messages on top of the page. With these notification messages, you can display any action like success, error, warning etc. These notification messages design in multi-color so that you could choose notification as per your choice.

Angular Notification Message Component


1. Download from npm

npm install ngx-notification-msg --save

2. Import the NgxNotificationMsgModule module

import {NgxNotificationMsgModule} from 'ngx-notification-msg'

3. Add NgxNotificationMsgModule to your module imports

 @NgModule({ ... imports: [ ... NgxNotificationMsgModule ] })

4. Import the NgxNotificationMsgService service in any angular component

import {NgxNotificationMsgService} from 'ngx-notification-msg'

5. Inject the NgxNotificationMsgService service in the angular component’s constructor

 constructor(private readonly ngxNotificationMsgService: NgxNotificationMsgService) {


6. Now you can use ngxNotificationMsgService service{
    status: NgxNotificationStatusMsg.SUCCESS,
    header: 'Hey',
    msg: 'How are you today ?!'


Use the NgxNotificationMsgService service in any angular component you like.


open(inputsConfig: INgxNotificationMsgConfig, element?: Element): void

Enums & Interfaces

export enum NgxNotificationStatusMsg {
    INFO = 'INFO',
    NONE = 'NONE'

interface INgxNotificationMsgConfig {
    status?: NgxNotificationStatusMsg;
    header?: string;
    msg: string;
    delay?: number;
    closeable?: boolean;

See live demo and download the source code.

This awesome script developed by maormoshe. Visit their official repository for more information and follow for future updates.

Saroj Meher
Saroj Meher
Howdy! Friends, I am Saroj Meher. I am an Artist. I do Painting on mediums like Acrylic, Watercolour, Oil etc. I have over 7 years of experience in WordPress. I am currently running 30+ website. I am specialized in WordPress and WooCommerce, WordPress Theme Customization and Theme Development. I can fix any kind of WordPress error/issue like PHP, CSS, Js issues and other Theme and Plugin related issues. Client's Satisfaction is my first priority.

Subscribe For More!

Subscribe to get the Latest Updates directly in you Email box.

Explore More


Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I am a Lecturer (English & Sociology), a professional Artist, and a blogger. I do painting, sketches since my childhood. I am in the teaching for 10 years. In this teaching line, I have experience in teaching English at High School and College levels. I have also experienced teaching computer theory during the school teaching period. This is my personal web corner over the internet.

Quick Guides

7 Simple Steps To Start Your Blogging Journey