ngx-alertbox

ng5-alertbox

This project insert a

Usage

1. Install with npm

npm install ng5-alertbox

1. Import to project

import { NgxAlertboxModule } from './ngx-alertbox/ngx-alertbox.module'

@NgModule({
  declarations: [],
  imports: [
    NgxAlertboxModule.forRoot({ })
  ],
  providers: [],
  bootstrap: []
})
export class AppModule { }

1. Add NgxAlertboxService to Coponent

import { NgxAlertboxService } from './ngx-alertbox/ngx-alertbox.service'

...
export class AppComponent {
  constructor(
    public boxService: NgxAlertboxService
  ) { }
}

Config and API

Configuration in NgxAlertBoxModule.forRoot({})

Config	Usage
autoRemove	number of second to remove the alertbox, 0 to disable
title	set the title of the alertbox
message	set the message of the alertbox

Add method to Typescript or HTML to create and remove the alertbox

Method	Usage
add()	add a alertbox to the view
clearLastOne()	remove the oldest alertbox
clearAll()	reamove all the alertbox

Example

...
// Configuartion in app.module.ts
imports: [
    NgxAlertboxModule.forRoot({
        autoRemove: 0,
        title: "Title",
        message: "Message",
    })
],


// Create and Remove in component.ts
import { NgxAlertboxService } from './ngx-alertbox/ngx-alertbox.service'
...
export class AppComponent {
    constructor(
        public boxService: NgxAlertboxService
    ) { }

    someMethod() {
        // Do something here
        this.boxService.add()

        // Do others here
        this.boxService.clearAll()
    }
}

Roadmap

1. Make it responsive
2. Adding animation when alertbox enter and exit the view
3. Adding more configuration api

Limitation

This library is only tested on Angular.io v5.0.0.