ngAlertbar

A configurable alertbar for Angular

View demo

Installation

1. Install using npm

npm install --save ng-alertbar

2. Add the themes/default.css stylesheet to your angular.json styles array

3. Import NgAlertBarModule into your angular module

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

4. Add the alertbar component to your app template

  <ng-alertbar [lifeTime]="3000" ...></ng-alertbar>

5. Inject NgAlertBarService and call triggerAlert(...)

constructor(private alertBarService: NgAlertBarService) {}

ngOnInit() {
  const options: AlertOptions = {...};
  this.alertBarService.triggerAlert('Custom message', options);
}

Options

Option Name	Description	Type	Default	Required
queueing (component)	Whether to add incoming alert triggers to a queue for later display if an alert is currently open	true	boolean
bypassQueue (trigger)	Whether the alert should not respect the queueing process. If set to false, the alert will be displayed immediately upon trigger even if another alert is currently shown	boolean	false
lifeTime	The time in ms between the alert opening and auto-closing. If the lifetime is set to 0, the alert will not autoclose	number	5000
showDelay	The time in ms between the alert trigger firing and the alert showing	number	100
backgroundColor	The background color of the alert	string	'linear-gradient(to top right, #9ce29c, #c9f9b9)'
borderColor	The border color of the alert	string	'#34a40e'
textColor	The color of the alert text	string	'black'
widthMode	'full': The alert will take up the whole width of the container 'partial': The alert will only use the space required	'full' | 'partial'	'partial'
html	Whether to inject the provided message as html or render it as plaintext	boolean	false

Note: Options denoted with (component) can only be applied as a component input, whereas options denoted with (trigger) can only be applied to individual alert triggers