Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shubhi1407/ng2-notify-popup
A simple, lightweight module for displaying notifications in your Angular 4 app.
https://github.com/shubhi1407/ng2-notify-popup
angular angular2 angular4 notifications notify popup typescript
Last synced: about 1 month ago
JSON representation
A simple, lightweight module for displaying notifications in your Angular 4 app.
- Host: GitHub
- URL: https://github.com/shubhi1407/ng2-notify-popup
- Owner: shubhi1407
- Created: 2017-04-08T14:18:44.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-05-27T12:22:57.000Z (over 7 years ago)
- Last Synced: 2024-09-18T17:48:48.567Z (3 months ago)
- Topics: angular, angular2, angular4, notifications, notify, popup, typescript
- Language: TypeScript
- Homepage: https://shubhi1407.github.io/ng2-notify-popup/
- Size: 1.63 MB
- Stars: 13
- Watchers: 4
- Forks: 9
- Open Issues: 5
-
Metadata Files:
- Readme: README.MD
Awesome Lists containing this project
- awesome-angular - ng2-notify-popup - A simple, lightweight module for displaying notifications in your Angular 4 app. (Uncategorized / Uncategorized)
README
# ng2-notify-popup
##### for Angular 4.x.
Based on [ ng-notify ](https://matowens.github.io/ng-notify/) for Angular 1.x by Mat Owens
## [ View Demo ](https://shubhi1407.github.io/ng2-notify-popup/)
## Installation
```bash
$ npm install --save ng2-notify-popup
```
## Usage
Configure your System.config
```javascript
System.config({
defaultJSExtensions: true,
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
"rxjs": "node_modules/rxjs",
...
'ng2-notify-popup' : 'npm:ng2-notify-popup',
},
packages: {
'app': {
main : './main.ts',
defaultJSExtensions : 'ts'
},
"ng2-notify-popup" : {
main:'./index.js',
defaultExtension : 'js'
}
}
});
```
and then from your Angular `AppModule`:
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
/** IMPORTANT : IE10 and IE11 requires the following to support `@angular/animation` (which is used by this module).
Run `npm install --save web-animations-js`.
*/
import 'web-animations-js';
// Import library
import { NgNotifyPopup } from 'ng2-notify-popup';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Add module to imports
NgNotifyPopup
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Once your library is imported, you can use its Notification service
```typescript
// You can now use this library service to show popup anywhere in angular app
import { Component } from '@angular/core';
import { NotificationService } from 'ng2-notify-popup';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [NotificationService]
})
export class AppComponent {
constructor(private notify: NotificationService) { }
// to append in body
show(text: string, type: string): void {
this.notify.show(text, { position:'top', duration:'2000', type: 'success' });
}
// to append in any other component.
showModular(text: string, type: string): void {
this.notify.show(text, { position:'top', duration:'2000', type: 'success', location: '#modular' });
}
```
## API
### NotificationService.setConfig( options: object )
This method can be used to override the default configuration provided by the module. All params are optinal
```typescript
NotificationService.setConfig({
position: 'top/bottom',
type: 'info/success/warn/error/grimace/default',
duration: 4000,
sticky: true/false,
})
```
### NotificationService.show( text: string, options?: object )
`show()` method can be called with an optional second argument to override the global default config
```typescript
// Simple notification
NotificationService.show("Success");
// Notification with options
NotificationService.show("Error occured", { position: 'top', type: 'error' })
//Show notification inside a division (MUST have position:relative)
NotificationService.show("Inside a div", { location: '#my-div' })
```
### NotificationService.destroy()
```typescript
// Destroy any active notification
NotificationService.destroy();
```
## Custom type
You can create your own `type` in CSS as follows
```CSS
.ngn-wild {
background-color: #f4a460;
}
```
## Development
To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:
```bash
$ npm run build
```
To lint all `*.ts` files:
```bash
$ npm run lint
```
## License
MIT © [Shubhangi Gupta](mailto:[email protected])