Welcome to ngx-toast-notify!

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message with custom theme based.

Features: Positioned toast notifications with allows custom theme as responsive

Install: npm install ngx-toast-notify

Preview demo

This preview was generated with CODESANDBOX

CDN

CDN Link for ngx-toast-notify- https://unpkg.com/ngx-toast-notify@0.0.3/bundles/ngx-toast-notify.umd.js

Import

Import the module on your app.module.ts file as follow.

import { NgxToastNotifyModule , NgxToastNotifyService } from "ngx-toast-notify";

@NgModule({
declarations: [AppComponent],
imports: [
    BrowserModule,
    AppRoutingModule,
    NgxToastNotifyModule.forRoot({
            toastTimeoutInSeconds:  10,
            animationDelayInMilliSeconds:  500,
            enableClosebutton:  true,
            position:  'top-right',
            backgroundColor:  '',
            textColor:  ''
    })
],
providers: [NgxToastNotifyService],
bootstrap: [AppComponent]
})

On a component or service inject the toast service as follows

import { NgxToastNotifyService } from 'ngx-toast-notify';

constructor(private  toast: NgxToastNotifyService) {}

public showToastTopRight() {
    this.toast.showToast('Toast text', 'warning', 'top-right');
}

Workflow:
showToast(text: string, mode: string, position: string): Creates toast notification.

`text`  — : Toast text to be shown. - String
`mode`  — : Toast appearance as - primary | warning | danger | success | info - String
`position`  — : Toast position at - top-left | top-right | bottom-left | bottom-right | top-center | bottom-center

Preview

Code integration

To use this package as a service npm i ngx-toast-notify install this on the root angular project .

Note: Don't forget to run this commend npm i ngx-toast-notify on root folder or else it will throw error.

Author

Thanks in advance

Manojkumar Muthukumar

Coimbatore