https://github.com/sir-captainmorgan21/ng-bootstrap-alert
Provides Bootstrap 4 driven alert messaging for your application.
https://github.com/sir-captainmorgan21/ng-bootstrap-alert
alert angular angular-2 angular-components angular2 angular4 bootstrap error-handling error-messages messaging modules notifications
Last synced: 4 months ago
JSON representation
Provides Bootstrap 4 driven alert messaging for your application.
- Host: GitHub
- URL: https://github.com/sir-captainmorgan21/ng-bootstrap-alert
- Owner: sir-captainmorgan21
- Created: 2017-11-20T17:37:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-13T02:09:29.000Z (about 8 years ago)
- Last Synced: 2025-02-25T03:23:41.595Z (over 1 year ago)
- Topics: alert, angular, angular-2, angular-components, angular2, angular4, bootstrap, error-handling, error-messages, messaging, modules, notifications
- Language: TypeScript
- Size: 1.59 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NgBootstrapAlert
Provides alert messaging for your application. Message styling is driven by [Bootstrap](https://getbootstrap.com/).
## Table of Contents
* [Demo](#demo)
* [Installation](#installation)
* [Setup](#setup)
* [Configuration](#configuration)
* [Alert Types](#alert-types)
* [Alert Position](#alert-position)
* [Usage Examples](#usage-examples)
## Demo
You can clone down this repo to deploy a demo locally.
## Installation
```
npm install ng-bootstrap-alert
```
## Setup
Import ```BootstrapAlertModule``` into your ```app.module```.
```typescript
import { BootstrapAlertModule } from 'ng-bootstrap-alert';
@NgModule({
...
imports: [
BootstrapAlertModule
],
})
```
Place the ```bootstrap-alert``` selector at the bottom of your app.component.html
```html
```
Import ```BootstrapAlertService``` and ```BootstrapAlert``` into the component you want to intiate the alert.
```typescript
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](#alert-types)
* ```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](https://v4-alpha.getbootstrap.com/components/alerts/) 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:
```html
```
* top-left
* top-center
* top-right
* bottom-left
* bottom-center
* bottom-right
## Usage Examples
### Basic Usage
```typescript
this.bootstrapAlertService.alert(new BootstrapAlert("BootstrapAlert Message!", "alert-success"));
```
### Custom Timeout
```typescript
var alert = new BootstrapAlert("BootstrapAlert Message!", "alert-success");
alert.timeoutInMilliseconds = 1000;
this.bootstrapAlertService.alert(alert);
```