Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stanvanheumen/ngx-notifications
A simple library that allows you to notify your users in your Angular 5+ app.
https://github.com/stanvanheumen/ngx-notifications
angular angular-library angular-universal aot-compatible observables typescript
Last synced: 3 months ago
JSON representation
A simple library that allows you to notify your users in your Angular 5+ app.
- Host: GitHub
- URL: https://github.com/stanvanheumen/ngx-notifications
- Owner: stanvanheumen
- Created: 2018-03-02T13:35:44.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-05T08:08:56.000Z (over 6 years ago)
- Last Synced: 2024-10-11T11:51:29.712Z (4 months ago)
- Topics: angular, angular-library, angular-universal, aot-compatible, observables, typescript
- Language: TypeScript
- Size: 75.2 KB
- Stars: 11
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
Awesome Lists containing this project
- awesome-angular-components - stanvanheumen/ngx-notifications - A simple library that allows you to notify your users in your Angular 5+ app. (UI Components / Notification)
README
# `ngx-notifications`
A simple library that allows you to notify your users in your Angular 5+ app.
- Use command + F or ctrl + F to search for a keyword.
- Contributions welcome, please see [contribution guide](.github/CONTRIBUTING.md).
## Features
- :camel: **Easy implementation**
- :mouse: **Lazy loading compatible**
- :sheep: **Angular Universal compatible**
- :bird: **Ahead-Of-Time compilation compatible**
- :monkey: **Automatic support for multiple languages**
## Demo
[Click here to play with the example](https://stackblitz.com/github/stanvanheumen/ngx-notifications)
## Installation
To use ngx-notifications in your project install it via `npm` or `yarn`:
```bash
# To get the latest stable version in dependencies
$ npm install @stanvanheumen/ngx-notifications --save
# Or
$ yarn add @stanvanheumen/ngx-notifications
```
## Setup
To get the correct fonts and icons you should add these two link-tags to the `head` section of your `index.html` (these are not included for performance).
```html
```
Import the `NgxNotificationsModule` in your AppModule and call the `forRoot()` method to receive a singleton of the `NotificationsService`.
```typescript
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgxNotificationsModule} from '@stanvanheumen/ngx-notifications';
import {NgxTranslationsModule} from '@stanvanheumen/ngx-translations';
@NgModule({
imports: [
BrowserAnimationsModule, // or NoopAnimationsModule.
NgxNotificationsModule.forRoot(),
NgxTranslationsModule.forRoot(...) // Optional.
]
})
export class AppModule {}
```
## Example
Add the `` to your `AppComponent`. This will be the place where the
notifications will be shown.
```typescript
import {NotificationsService} from '@stanvanheumen/ngx-notifications';
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent implements OnInit {
constructor(private notifications: NotificationsService) {
}
ngOnInit() {
this.notifications.success('Something went really good!');
this.notifications.error('Something went really bad!');
this.notifications.warn('I want to warn you about something!');
this.notifications.info('Just some relevant information.');
}
}
```
## Options
### Notification
| Property | Type | Required | Description |
| ----------------- | ------------------------------ | ----------------- | -------------------------------------------------------------------------------- |
| title | string | false | The title of the notification. (it's default is based on the type) |
| text | string | true | The text of the notification. |
| type | NotificationType | true | The type of the notification. |
| timeout | number | false | The time (in ms) that the notification will stay on the screen (default 4000ms). |
| icon | string | false | The icon of the notification. (it's default is based on the type) |
### Notification types
| Enum |
| ----------------- |
| Success |
| Error |
| Warning |
| Info |