In this post I am going to share simple angular component to display alert messages on top of the page these notification messages you can display on any action like success, error, warning etc. These notification messages design in multi color so that you could choose notification as per your need.
Installation
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
this.ngxNotificationMsgService.open({
status: NgxNotificationStatusMsg.SUCCESS,
header: 'Hey',
msg: 'How are you today ?!'
});
API
Use the NgxNotificationMsgService service in any angular component you like.
Methods
open(inputsConfig: INgxNotificationMsgConfig, element?: Element): void
Enums & Interfaces
export enum NgxNotificationStatusMsg {
SUCCESS = 'SUCCESS',
FAILURE = 'FAILURE',
INFO = 'INFO',
NONE = 'NONE'
}
interface INgxNotificationMsgConfig {
status?: NgxNotificationStatusMsg;
header?: string;
msg: string;
delay?: number;
closeable?: boolean;
}
See live demo and download source code.
This awesome script developed by maormoshe. Visit their official repository for more information and follow for future updates.
