Skip to content
Angular bootstrap alerts as notifications
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
projects/ngx-bootstrap-alert-notification
src
.editorconfig
.gitignore
README.md
angular.json
browserslist
karma.conf.js
package.json
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
tslint.json
yarn.lock

README.md

Every feedback is welcome!

Demo

Installation

Install via npm:

$ npm install @benevideschissanga/ngx-bootstrap-alert-notification --save

or yarn:

$ yarn add @benevideschissanga/ngx-bootstrap-alert-notification

Usage

To use ngx-bootstrap-alert-notification

Import `NgxBootstrapAlertNotificationModule.forRoot()` in your main module 
In your component inject the `NgxBootstrapAlertNotificationService` and use like:

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      |      
| ----------------- | ------------------ | ------------------------------------------------------ |
| `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<any>` | `Custom template`                                      |

NotificationConfig

You can pass custom configs

| Property Name     | property Type      |      
| ----------------- | ------------------ | ------------------------------------------------------------------------------------- |
| `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`                                               |
You can’t perform that action at this time.