ng2ds-user-alerts

user alert modals for Angular apps

quickstart

npm install ng2ds-user-alerts

add to module.ts

import { Ng2dsUserAlertsService, Ng2dsUserAlerts } from 'ng2ds-user-alerts';
...
@NgModule({
  declarations: [
    ...
    Ng2dsUserAlerts
  ],
  imports: [...],
  providers: [Ng2dsUserAlertsService],
  ...

add to your index.html if you want close button displayed on ui

<link href="https://file.myfontastic.com/JR3FD8zmWfGk4B4oAz3KEh/icons.css" rel="stylesheet">

add somewhere in root of app i.e. next to router-outlet [ all config options shown with their default values ]

<ng2ds-user-alerts 
    [overlayOpacity]="0.7"
    [useOverlay]=false
    [removeHeader]=true
    [bodyPadding]="'32px 16px'"
    [margin]="10" 
    [width]="80" 
    [font]="Arial" 
    [headerFontSize]="'20px'" 
    [contentFontSize]="'16px'" 
    [successColor]="'#5cb85c'" 
    [errorColor]="'#d9534f'" 
    [warningColor]="'#f0ad4e'"
    [infoColor]="'#5bc0de'"
    [contentBg]="'#fefefe'"
    [headerFontColor]="'#FFF'"
    [contentFontColor]="'#333'"
    [lineHeight]="'16px'"
    [closeTimeout]=3300
    ></ng2ds-user-alerts>

import into your component, inject into constructor

...
import { Ng2dsUserAlertsService } from 'ng2ds-user-alerts';
...
export class AppComponent {

    constructor( private ng2dsUserAlerts:Ng2dsUserAlertsService ) {}

methods to show alert

    public demoSuccessModal() {
        this.ng2dsUserAlerts.openModal( 'success', 'Success Header', 'Some Content', 0 );
    }

    public demoErrorModal() {
        this.ng2dsUserAlerts.openModal( 'error', 'Error Header', 'Some Content', 0 );
    }

    public demoWarningAutoClose() {
        this.ng2dsUserAlerts.openModal( 'warning', 'Warning Header', 'Some Content', 2000 );
    }

• last number is timeout delay (0 will use close button)
• if useOverlay is true, will use click anywhere as close