# bmx-toast-2

The bmx-toast-2 library is a powerful and lightweight Angular library that provides an easy-to-use and customizable notification system for web applications. It allows developers to display attractive and interactive toast notifications to provide feedback, alerts, and notifications to users.


## Installation

To install the bmx-toast Library, follow these steps:

`npm i bmx-toast-2`

After installing the toaster,  add and import **BmxToastModule** and **BrowserAnimationsModule** in your Project **app.module.ts**

```javascript 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BmxToastModule } from 'bmx-toast';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

  @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // <-- Include this
    BmxToastModule // <--  Include this
  ],
  bootstrap: [AppComponent]
})

```
and your **app.component.ts** -

```javascript 
import { Component } from '@angular/core';
import { BmxToastService } from 'bmx-toast';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'bmx-toast-demo';
  constructor(
    public _toastService : BmxToastService  //<-- Include BmxToastService
    ){
  }
}
```
add the line in your app.component.html

```html
<lib-bmx-toast></lib-bmx-toast>
```

now it's time to implement the toaster in your app.

## Implementation
bmx-toast has some mandatory and non mandatory fields.
as an example-

mandatory Key |   Value
--- | --- 
type | `'success'` or `'info'` or `'error'` or `'warning'` 
toastHeading | `string`
toastText | `string`



Non mandatory Key |   Value
--- | --- 
position | `'top-right'` or `'top-left'` or `'top-center'` or `'bottom-center'` 
preventDuplicate | `boolean` 
timeout | `number` 
toastHeading | `string`
closeIcon | `boolean` 
autoClose | `boolean`
progressbar | `boolean`
background | `string`
color | `string`
border | `'rounded'` or `'semi-rounded'` or `'none'`


now how to implement it ?
we must provide the mandatory fields and as per requrnment we can add non-mandatory fields.
as an example: 

```javascript I'm A tab
public fireTheToast(): void{
    this._toastService.generate({
        type: 'success', //<-- mandatory key
        toastHeading: 'Here goes Heading', //<-- mandatory key 
        toastText: 'Here goes paragraph', //<-- mandatory key
        timeout: 3000, //<-- non-mandatory key
        position: 'top-left', //<-- non-mandatory key
        autoClose: true, //<-- non-mandatory key
        progressbar: true //<-- non-mandatory key
    });
}

```

## Demo
[Demo is now live!](https://bmx-toast-demo.netlify.app/)