Ngx-bootstrap-alert NPM

NgxBootstrapAlert

For Angular5+ Provides alert messaging for your application. Message styling is driven by Bootstrap.

Demo

You can clone down this repo to deploy a demo locally.

Installation

npm install ngx-bootstrap-alert

Setup

Import BootstrapAlertModule into your app.module.

import { BootstrapAlertModule } from 'ngx-bootstrap-alert';

@NgModule({
  ...
  imports: [
    BootstrapAlertModule
  ],
})

Place the bootstrap-alert selector at the bottom of your app.component.html

<bootstrap-alert alertPosition="top-left"></bootstrap-alert>

Import BootstrapAlertService and BootstrapAlert into the component you want to intiate the alert.

import { BootstrapAlertService, BootstrapAlert } from 'ng-bootstrap-alert';

Configuration

The BootstrapAlert object offers three exposed configurations.

message The message to be presented to the user
type The type of message. See purpose of type here
timeoutInMilliseconds How long the message will be displayed to the user before it fades away. Default timeout is 3000.

Alert Types

The following message types are avialable. The typess below represent the Bootstrap alert classes.

alert-success
alert-info
alert-warning
alert-danger

Alert Position

The following locations are available. Pass the location into the bootstrap-alert component selector like so:

<bootstrap-alert alertPosition="top-left"></bootstrap-alert>

top-left
top-center
top-right
bottom-left
bottom-center
bottom-right

Usage Examples

Basic Usage

this.bootstrapAlertService.alert(new BootstrapAlert("BootstrapAlert Message!", "alert-success"));

Custom Timeout

var alert = new BootstrapAlert("BootstrapAlert Message!", "alert-success");
alert.timeoutInMilliseconds = 1000;
this.bootstrapAlertService.alert(alert);