Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BenevidesLecontes/ngx-bootstrap-alert-notification
Angular bootstrap alerts as notifications
https://github.com/BenevidesLecontes/ngx-bootstrap-alert-notification
alert angular angular10 angular8 angular9 bootstrap bootstrap4 notification notifications
Last synced: 2 months ago
JSON representation
Angular bootstrap alerts as notifications
- Host: GitHub
- URL: https://github.com/BenevidesLecontes/ngx-bootstrap-alert-notification
- Owner: BenevidesLecontes
- Created: 2019-07-06T19:58:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:00:53.000Z (about 2 years ago)
- Last Synced: 2024-10-31T18:06:36.717Z (3 months ago)
- Topics: alert, angular, angular10, angular8, angular9, bootstrap, bootstrap4, notification, notifications
- Language: TypeScript
- Homepage: https://benevideslecontes.github.io/ngx-bootstrap-alert-notification/
- Size: 5.63 MB
- Stars: 11
- Watchers: 2
- Forks: 2
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular-components - BenevidesLecontes/ngx-bootstrap-alert-notification - Angular bootstrap alerts as notifications (UI Components / Notification)
README
**Every feedback is welcome!**
[Demo](https://benevideslecontes.github.io/ngx-bootstrap-alert-notification/)
## Installation
Install via npm:
```shell
$ npm install @benevideschissanga/ngx-bootstrap-alert-notification --save
```
or yarn:
```shell
$ yarn add @benevideschissanga/ngx-bootstrap-alert-notification
```
## Usage
To use ngx-bootstrap-alert-notification
In your main module, import `NgxBootstrapAlertNotificationModule.forRoot()`
In your component inject the `NgxBootstrapAlertNotificationService` and use like:
```typescript
this.notificationService.show(
{
type: 'danger',
message:
'This is a notification with close button and icon and can have many lines.',
icon: 'icon icon-bell-55',
title: 'Danger',
},
{
position: 'topRight',
}
)
```
### NotificationData
| Property Name | Property Type | Property Value |
| ------------- | ---------------- | ------------------------------------------------- |
| type | NotificationType | `warning`, `success`, `primary`, `info`, `danger` |
| title | string | Title for the alert |
| icon | string | Icon class name |
| message | string | Message to display |
| template | TemplateRef | Custom template |
### NotificationConfig
You can pass custom configs
| Property Name | Property Type | Property Value |
| ------------- | ------------- | ------------------------------------------------------------------------------- |
| position | string | `topLeft`, `topCenter`, `topRight`, `bottomLeft`, `bottomCenter`, `bottomRight` |
| animation | boolean | Should be animated or not |
| timeOut | number | Delay time to auto close the alert |
| dismissible | boolean | Should auto close or not |
| unique | boolean | Dont show duplicated messages if true |
## Versions
`0.0.3 - Angular 8`
`0.0.4 - Angular 9`
`0.0.5 - Angular 10`