bmx-toast

The bmx-toast 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

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

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 -

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 in top

<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:

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!