Display alert messages using Angular and Bootstrap v4

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.


  • 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";
 imports: [
  // ...
 // ...


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) {
    //general usage
    this.bootstrapGrowlService.addAlert([message: string], [type: BootstrapAlertType], [dismissable?: boolean]);
    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);


You can configure the display area of the alerts however you want. Just use the following selector:

  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 10;