Bootstrap gives us the ability to show pretty alerts (see Bootstrap documentation). But they are only static components on a website. Showing alerts in your Single Page Application with Bootstrap only covers simple use cases. Thus I created a library, which enables us to show alerts on top of your page using Angular.
Features
- add custom growl alerts somewhere in your application
- specify a maximum of alerts to show
- specify a timeout for the alerts
- display HTML in your alert
- specify whether an alert should be dismissable
- use all Bootstrap alert types
Installation, Integration and Usage
You need to install and configure the dependencies above, afterwards:
npm install ng2-bootstrap-growl
After installation, add the service and the component to your module:
import {BootstrapGrowlService} from "ng2-bootstrap-growl";
@NgModule({
imports: [
// ...
BootstrapGrowlModule
],
// ...
})
Integration
Add the component somewhere in your root template:
<bootstrap-growl [alertCount]="3" [autoClose]="10000"></bootstrap-growl>
Parameters (optional)
alertCount maximum number of alerts to show (defaults: 999)
autoClose time in milliseconds (defaults: -1 - never closed)
Show Growl
The following code snippets shows how to display a message in the growl.
import {BootstrapGrowlService, BootstrapAlertType} from "ng2-bootstrap-growl";
export class AnyComponent{
constructor(private bootstrapGrowlService: BootstrapGrowlService) {
}
addGrowlAlert(){
//general usage
this.bootstrapGrowlService.addAlert([message: string], [type: BootstrapAlertType], [dismissable?: boolean]);
//examples
this.bootstrapGrowlService.addAlert("any custom message", BootstrapAlertType.SUCCESS);
this.bootstrapGrowlService.addAlert("any custom message <strong>with</strong> HTML", BootstrapAlertType.INFO);
this.bootstrapGrowlService.addAlert("any custom message", BootstrapAlertType.WARNING);
this.bootstrapGrowlService.addAlert("any custom message", BootstrapAlertType.DANGER, false);
}
}
Style
You can configure the display area of the alerts however you want. Just use the following selector:
bootstrap-growl{
position: absolute;
right: 8px;
top: 8px;
z-index: 10;
}