ngx-toast-notify

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.9/bundles/ngx-toast-notify.umd.js

Import

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

• [x] > 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

• [x] 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

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