ngx-alertbox v0.0.0

ng5-alertbox

This project insert a

Usage

1. Install with npm

npm install ng5-alertbox

2. Import to project

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

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

3. 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.