An easy notifications library for Angular
Soon
Install the library
npm install --save ng-cool-notifier
Import the CoolNotifierModule
in to your root AppModule
import { CoolNotifierModule } from 'ng-cool-notifier';
@NgModule({
imports: [
BrowserModule,
CoolNotifierModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Add the CoolNotifierComponent in to the component where you want to use the notifications. Or in your top level component for use in child components.
...
template: '<cool-notifier></cool-notifier>'
...
You will also need to use the CoolNotifierService in your component to create or remove the notifications.
...
constructor( private _service: CoolNotifierService ) {}
...
Method | Description |
---|---|
success(title?: any, content?: any, opts?: any) |
Creates a success notification with the provided title, content and options. |
error(title?: any, content?: any, opts?: any) |
Creates an error notification with the provided title, content and options. |
alert(title?: any, content?: any, opts?: any) |
Creates an alert notification with the provided title, content and options. |
warn(title?: any, content?: any, opts?: any) |
Creates a warn notification with the provided title, content and options. |
info(title?: any, content?: any, opts?: any) |
Creates an info notification with the provided title, content and options. |
This are the current options that can be set:
Option | Type | Default | Description |
---|---|---|---|
position | ["top" or "bottom" or "middle", "right" or "left" or "center"] | ["bottom", "right"] | Set the position on the screen where the notifications should display. Pass an array with two values example: ["top", "left"]. |
timeOut | int | 0 | Determine how long a notification should wait before closing. If set to 0 a notification won't close it self. |
clickToClose | boolean | true | Determines if notifications should close on click. |
customClass | string | null | A class that should be attached to the notification. (It doesn't exactly get attached to the selector but to the first div of the template.) |
rtl | boolean | false | Adds the class .rtl-mode to the notification aligning the icon to the left and adding direction: rtl |
animate | "fade" or "fromTop" or "fromRight" or "fromBottom" or "fromLeft" or "scale" or "rotate" or null | "fromRight" | Choose the type of animation or set the value to null not to display animations. |
withIcon | boolean | true | Determines if notifications should show default icon |
MIT © Mehdi Mecheri