ng2-alert-center

Alert center provides an alert service and an alert component, you can include in your Angular 2 project.

Currently it uses bootstrap 3 for styling. If you don't use bootstrap, you can just use the bootstrap classes to apply your own styles.

Status

Install

npm install ng2-alert-center --save

Usage

Hopefully, it is easy to understand by this example, how to use this module. Refer the API description for further information.

In you module add.

import { AlertCenterModule }    from 'ng2-alert-center';
@NgModule({
  imports: [
    ...
    AlertCenterModule,
    ...
  ],
  ...
}]

and the next thing is to import the components and implement the methods.

import { AlertCenterService, Alert, AlertType }             from 'ng2-alert-center'

@Component({
  template: `
    <!-- Insert the alert center component once into your html body /-->
    <div class="my-alert-center-style">
      <nac-alert-center [animation]="'fancy'" [htmlTextEnabled]="true"></nac-alert-center>
    </div>
  `
})
export MyComponent {
  /* Inject the alert service into your component. */
  constructor(private service: AlertCenterService) { }
  
  /* Call this method to send an alert. */
  sendAnAlert() {
    const alert = new Alert(AlertType.INFO, 'Test alert.');
    
    this.service.alert(alert);
  }
  
  /* Let the alert disappear by itself in 5 seconds */
  sendAnAutoDismissingAlert() {
    const alert = Alert.create(AlertType.INFO, 'Auto dismissing <b>test alert</b>.', 5000);

    this.service.alert(alert);
  }
}

Show case

You can test the module online:

• http://ng2-alert-center-demo.farkas.land

Roadmap

Please consider, that this module is under development. Following features are coming:

• Links in alerts
• Support for i18n
• More tests

API

Component <nac-alert-center>

Use this component to define the place, where alerts appear in your application. You can use individual styles for the positioning.

Inputs:

animation:

• it defines the enabled animation of appearing disappearing of alerts.
• possible values: 'none', 'decent', 'fancy'
• default: 'none'

htmlTextEnabled:

• set it true to enable html in alert text.
• possible values: true|false
• default: false

Injectable Service AlertCenterService

Inject this class in your components, which you want to send an alert from.

Properties

alerts: Observable<Alert>

The component <nac-alert-center> will be informed via this observable, if an alert was sent.

Methods:

alert (anAlert: Alert): void

Informs the observing components about a new alert.

Model class Alert

Represents an alert, which will be displayed by the component <nac-alert-center>.

Properties:

alertType: AlertType

default: none

text: string

default: none

textStrong: string

default: ''

autoDismissTime: number

default: 0

dismissable: boolean

default: true

Methods:

constructor (alertType: AlertType, text: string, textStrong = '', dismissType = 0)