https://github.com/DanielYKPan/ng-notifier
Angular 2 Notifier Demo
https://github.com/DanielYKPan/ng-notifier
angular2 angularjs2 javascript notify typescript
Last synced: 7 months ago
JSON representation
Angular 2 Notifier Demo
- Host: GitHub
- URL: https://github.com/DanielYKPan/ng-notifier
- Owner: DanielYKPan
- License: mit
- Created: 2016-12-30T20:53:50.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-03T04:02:22.000Z (almost 9 years ago)
- Last Synced: 2025-06-06T03:41:46.429Z (8 months ago)
- Topics: angular2, angularjs2, javascript, notify, typescript
- Language: TypeScript
- Homepage: https://danielykpan.github.io/ng-notifier/
- Size: 2.18 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Angular: Notifier (ng-notifier)
===================
## Important
This package is suitable to Angular v2.X and v4.X apps.
## Usage
1. Install ng-notifier using npm:
``` npm install ng-notifier --save ```
2. Add NotifierModule into your AppModule class. `app.module.ts` would look like this:
```typescript
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {NotifierModule} from 'ng-notifier';
@NgModule({
imports: [BrowserModule, NotifierModule.forRoot()],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {
}
```
4. Inject 'NotifierService' class in your component class.
```typescript
import { Component, OnInit, ViewContainerRef } from "@angular/core";
import { NotifierService } from 'ng-notifier';
@Component({
selector: 'awesome-component',
template: 'Notifier Tester'
})
export class AppComponent implements OnInit {
constructor( private notifier: NotifierService,
private vRef: ViewContainerRef ) {
}
ngOnInit(): void {
this.notifier.setRootViewContainerRef(this.vRef);
}
showSuccess() {
this.notifier.success('You are awesome!', 'Success!');
}
showError() {
this.notifier.error('This is not good!', 'Oops!');
}
showAlert() {
this.notifier.alert('You are being warned.', 'Alert!');
}
showInfo() {
this.notifier.info('Just some information for you.');
}
}
```
### NotifierOptions Configurations
By default, the notifier will show up at bottom right corner of the page view, and will automatically dismiss in 3 seconds.
You can configure the notifiers using NotifierOptions class. Currently we support following options:
##### notifierLife: (number)
Determines how long an auto-dismissed notifier will be shown. Defaults to 3000 miliseconds. If you set it to 0, the notifier will not auto-dismiss.
##### maxStack: (number)
Determines maximum number of notifiers can be shown on the page in the same time. Defaults to 5.
##### position: (Array)
Determines where on the page the notifier should be shown. Here are list of values:
* ['bottom', 'right'] (Default)
* ['bottom', 'center']
* ['bottom', 'left']
* ['top', 'right']
* ['top', 'center']
* ['top', 'left']
##### messageClass: (string)
CSS class for content within notifier.
##### titleClass: (string)
CSS class for title within notifier.
##### animate: (string)
You have following choice: 'fade', 'flyLeft' or 'flyRight'.(Defaults to 'fade')
* fade: makes every notifier either fade in or fade out.
* rotate: makes every notifier either rotate in or rotate out.
* scale: makes every notifier either scale in or scale out.
* flyLeft: makes every notifier fly in from left side.
* flyRight: makes every notifier fly in from right side.
Use dependency inject for custom configurations. You can either inject into `app.module.ts` or any component class:
```typescript
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {NotifierModule, NotifierOptions } from 'ng-notifier';
let options: NotifierOptions = new NotifierOptions({
animate: 'flyRight',
position: ['top', 'right'],
notifierLife: 4000
});
@NgModule({
imports: [
BrowserModule,
NotifierModule.forRoot(options),
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {
}
```
### Override global option:
You can also override `notifierLife`, `titleClass`, `messageClass`, `animate`, options for individual notifier:
this.notifier.sucess('This notifier will dismiss in 10 seconds.', null, {notifierLife: 10000});
this.notifier.info('This notifier will have "new-title" class in its title', null, {titleClass: 'new-title'});