Ngx Bootstrap Alerts

Ngx Bootstrap Alerts

For typical user actions such as info, error with available and flexible alert messages, Alerts offers contextual messages.

AlertComponent

Show collapsible panels of content to display details in a limited amount of space.

selector

• alert,bs-alert

Inputs

• dismissible − boolean, If set, displays an inline "Close" button, default: false
• dismissOnTimeout − string | number, Number in milliseconds, after which alert will be closed
• isOpen − boolean, Is alert visible, default: true
• type − string, alert type. Provides one of four bootstrap supported contextual classes: success, info, warning and danger, default: warning

Outputs

• onClose − This event fires immediately after close instance method is called, $event is an instance of Alert component.
• onClosed − This event fires when alert closed, $event is an instance of Alert component

AlertConfig

Properties

• Boolean is dismissible. Alerts are dismissible by default. Default: false
• DismissOnTimeout − number, default time to dismiss before alert, default: undefined
• Type − string, default type of alert, default: warning

Example

We need to update the app.module.ts used in the ngx-bootstrap Accordion chapter to use AlertModule and AlertConfig when we're going to use alerts.

To use AlertModule and AlertConfig, update app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule, AlertConfig } from 'ngx-bootstrap/alert';
@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule
   ],
   providers: [AlertConfig],
   bootstrap: [AppComponent]
})
export class AppModule { }

Update test.component.html to use the alerts.

test.component.html

<alert type="success" 
   [dismissible]="dismissible"
   [isOpen]="open"
   (onClosed)="log($event)"
   [dismissOnTimeout]="timeout">
   <h4 class="alert-heading">Well done!</h4>
   <p>Success Message</p>
</alert>
<alert type="info">
   <strong>Heads up!</strong> Info
</alert>
<alert type="warning">
   <strong>Warning!</strong> Warning
</alert>
<alert type="danger">
   <strong>Oh snap!</strong> Error
</alert>