Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sibiraj-s/ngx-notifier
🔔 A Simple Notification Service for Angular applications
https://github.com/sibiraj-s/ngx-notifier
anuglar bootstrap ngx-notifier notifications
Last synced: about 2 months ago
JSON representation
🔔 A Simple Notification Service for Angular applications
- Host: GitHub
- URL: https://github.com/sibiraj-s/ngx-notifier
- Owner: sibiraj-s
- License: mit
- Created: 2020-01-04T12:44:22.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-22T06:54:00.000Z (6 months ago)
- Last Synced: 2024-10-19T19:55:04.874Z (about 2 months ago)
- Topics: anuglar, bootstrap, ngx-notifier, notifications
- Language: TypeScript
- Homepage: https://sibiraj-s.github.io/ngx-notifier/
- Size: 5.59 MB
- Stars: 4
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-notifier - A Simple Notification Service for Angular applications. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-notifier - A Simple Notification Service for Angular applications. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-notifier - A Simple Notification Service for Angular applications. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-notifier - A Simple Notification Service for Angular applications. (Table of contents / Third Party Components)
README
NgxNotifier
A Simple Notification Service for Angular Applications
## Getting Started
ngx-notifier is a simple notification service for Angular applications and is meant to be simple with limited features.
If you are looking for angularjs(1.x) version, Try [angularjs-toast][angularjs-toast]
### Installation
Install via Package managers such as [npm][npm] or [yarn][yarn]
```bash
npm install ngx-notifier --save
# or
yarn add ngx-notifier
```
### Usage
Import `provideAnimations` in your app.config to enable required animations
```typescript
import { ApplicationConfig } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
export const appConfig: ApplicationConfig = {
providers: [provideAnimations()],
};
```
Then, import `NgxNotifierComponent` in your app.component.ts
```ts
import { NgxNotifierComponent, NgxNotifierService } from 'ngx-notifier';
@Component({
selector: 'app-root',
standalone: true,
imports: [NgxNotifierComponent],
templateUrl: './app.component.html',
})
export class AppComponent {
constructor(private ngxNotifierService: NgxNotifierService) {}
createNotification() {
this.ngxNotifierService.createToast(message, style, duration);
}
}
```
Then, add the `ngx-notifier` component in your app.component.html
```html
```
#### Create a toast
```ts
this.ngxNotifierService.createToast(message, style, duration);
```
- **message** message to be sent as notification
- **style** notification style, which can be the following `success|danger|warning|info`. Default is `info`
- **duration** in milliseconds, timeout for the notification
#### Clear all toasts
```ts
this.ngxNotifierService.clear();
```
#### Clear the last toast
```ts
this.ngxNotifierService.clearLast();
```
### Notifier Component
Notifier component accepts
```html
```
- **allowDuplicates:** whether to allow duplicate messages in notifications
- **allowHTML** whether to allow or display HTML as it is, HTML will be sanitized and any JS will be maked as unsafe.
- **className** custom class for notifications
- **disableAnimations** whether to enable or disable animations for the toast.
- **dismissOnClick:** dismiss notification on click
- **duration** time in milliseconds for dismissing notifications, default is 60s
- **insertOnTop** whether to insert notification on top or bottom
- **max:** maximum number of notifications to be displayed
### Demo
Demo at stackblitz [ngx-notifier](https://stackblitz.com/edit/ngx-notifier)
[npm]: https://www.npmjs.com/
[yarn]: https://yarnpkg.com/lang/en/
[angularjs-toast]: https://github.com/sibiraj-s/angularjs-toast
[wiki]: https://github.com/sibiraj-s/ngx-notifier/wiki/ngx-notifier