Home

Awesome

Ng2Izitoast

Elegant, responsive, flexible and lightweight notification plugin implemented for angular 2 of iziToast

izitoast.marcelodolce.com

capa

Install

npm install ng2-izitoast --save

Configuration

in angular-cli.json add the script and css lines

...
"styles": [
    "../node_modules/izitoast/dist/css/iziToast.min.css"
],
"scripts": [
    "../node_modules/izitoast/dist/js/iziToast.min.js"
],
...

Running

in app.module.ts add

import { Ng2IziToastModule } from 'ng2-izitoast';//<-- this line

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    Ng2IziToastModule//<-- this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

now in app.component.ts add

...
constructor(public iziToast: Ng2IzitoastService) {}
...

...
this.iziToast.show({title: "Welcome"});
...

All options applicable to ng2-izitoast

ArgumentDefault ValueDescription
class''The class that will be applied to the toast. It may be used as a reference.
title''Title of the toast.
titleColor''Title color.
titleSize''Title fontSize.
titleLineHeight''Title lineHeight.
message''Message of the toast.
messageColor''Message color.
messageSize''Message fontSize.
messageLineHeight''Message lineHeight.
backgroundColor''Background color of the Toast.
themelightIt can be light or dark or set another class. Create and use like this ".iziToast-theme-name"
color''It can be #hexadecimal, pre-defined themes like blue, red, green and yellow or set another class. Create and use like this ".iziToast-color-name".
icon''Icon class (font-icon of your choice, Icomoon, Fontawesome etc.).
iconText''Icon text (font-icon using text, Material Ithemecons, etc.).
iconColor''Icon color.
image''Cover image.
imageWidth50Width of cover image
maxWidthnullset maxWidth of toast
zindex99999The z-index CSS attribute of the toast.
layout1It can be 1 or 2, or use another layout, creating the class like this: ".iziToast-layout3"
balloonfalseApplies a balloon like toast.
closetrueShow "x" close button.
closeOnEscapefalseAllows to close toast using the Esc key.
rtlfalseRTL option.
position'bottomRight'Where it will be shown. It can be bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter or center.
target''Fixed place where you want to show the toasts.
targetFirsttrueAdd toast to first position
toastOncefalseWaits for another toast to be closed on 'onClosed' function. You'll need an ID to use it.
timeout5000Amount in milliseconds to close the toast or false to disable.
dragtrueDrag Feature. Is used to close the toast.
pauseOnHovertruePause the toast timeout while the cursor is on it.
resetOnHoverfalseReset the toast timeout while the cursor is on it.
progressbartrueEnable timeout progress bar.
progressbarColor''Progress bar color.
progressBarEasinglinearAnimation Easing of progress bar.
overlayfalseEnables display the Overlay layer on the page.
overlayClosefalseAllows to close toast clicking on the Overlay.
overlayColorrgba(0, 0, 0, 0.6)Overlay background color.
animateInsidetrueEnable animations of elements in the toast.
transitionIn'fadeInUp'Default toast open animation. It can be: bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight or flipInX.
transitionOut'fadeOut'Default toast close animation. It can be: fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
transitionInMobile'fadeInUp'Default toast opening mobile transition.
transitionOutMobile'fadeOutDown'Default toast closing mobile transition.
onOpeningfunction() {}Callback function triggered when opening the toast.
onOpenedfunction() {}Callback function triggered when onOpened the toast.
onClosingfunction() {}Callback function triggered when closing the toast.
onClosedfunction() {}Callback function triggered when closed the toast.

Examples

Question

...
constructor(public iziToast: Ng2IzitoastService) {}
...

...
this.iziToast.question({
  title: "Welcome",
  progressBarColor: "red",
  onOpened: () => {
    console.log("opened");
  }
});
...

Progress

...
constructor(public iziToast: Ng2IzitoastService) {}
...

...
this.iziToast.question({
  title: "Welcome",
  class: "foo",
  progressBarColor: "red",
  onOpened: () => {
    console.log("opened");
  }
});

this.iziToast.progress(".foo").pause();
this.iziToast.progress(".foo").resume();
this.iziToast.progress(".foo").reset();
this.iziToast.progress(".foo").start();
...

Hide

...
constructor(public iziToast: Ng2IzitoastService) {}
...

...
this.iziToast.show({
  title: "Welcome",
  class: "foo",
  progressBarColor: "red",
  onClosed: () => {
    console.log("closed");
  }
});

this.iziToast.hide(".foo");
...