AngularToasts

🎉 Angular-Toasts is very easy to use and very powerful Toast library for Angular apps.

Installation

$ npm install angular-toasts

Features

• Easy to setup for real, you can make it runs within a moment.
• You can use it as a toast, or as a notification.
• Can set postion, duration, and other options.
• Dark and light mode.

Setup

Step 1 : Just import AngularToastModule from angular-toasts in Module file, and add it in a imports array like below.

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AngularToastModule } from "angular-toasts";

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AngularToastModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 2 : Then add Toast tag in your template like below (i.e. in your app.component.html file).

<ToastContainer></ToastContainer>

Usage

For usage purpose, you can use AngularToastService to show toast (i.e. in your app.component.ts file).

import { Component } from "@angular/core";
import { AngularToastService } from "angular-toasts";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  constructor(private _toast: AngularToastService) {}

  Click() {
    this._toast.success("Success", "This is a success message");
  }
}

Themes

• Theme-1

  

• Theme-2

  

• Theme-3

  

• Theme-4

  

• Theme-5

  

• Theme-6

  

Options

There are individual and global options for each toast

Individual options have more priority than Global options.

Individual Options

Option	Type	Default	Description	Parameters
theme	string	theme-1	Theme will decide the look of a toast.	'theme-1' |'theme-2'|'theme-3'| 'theme-4'| 'theme-5'| 'theme-6'
timeOut	string	2000	Time to live in milliseconds	Any millisecond as a string
hideCloseButton	boolean	false	Hide close button	'false'| 'true'
hideImage	boolean	false	Hide image	'false'| 'true'
imageUrl	string	' '	Image url (Only for light and dark type toasts) (Currently not working)	Any url as a string

Setting individual options

this._toast.info("Information", "This is a info message", {
  timeOut: "20000",
  theme: "theme-1",
  hideCloseButton: "true",
  hideImage: "true",
});

Global Options

Option	Type	Default	Description	Parameters
theme	string	theme-1	Theme will decide the look of a toast.	'theme-1' |'theme-2'|'theme-3'| 'theme-4'|'theme-5'|'theme-6'
autoClose	string	2000	Time to live in milliseconds	Any millisecond as a string
effect	string	zoom	This option is for different animation of a toast.	'zoom' | 'bounce' | 'fade'
postion	string	top-right	This option will decide the position of a toast on a scree.	'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left'
hideCloseButton	boolean	false	Hide close button	'false'| 'true'
hideImage	boolean	false	Hide image	'false'| 'true'

Setting global options

<ToastContainer
  position="top-right"
  effect="zoom"
  autoClose="2000"
  theme="theme-1"
  hideCloseButton="false"
  hideImage="false"
>
</ToastContainer>

Longer Duration of the Toast

• To make toast duration longer which seems like infinite, you can use equation in Global option - autoClose or in Individual option - timeOut like 1000*60*60*24 (1 day).

<ToastContainer autoClose="1000*60*60*24"> </ToastContainer>

this._toast.info("Information", "This is a info message", {
  timeOut: "1000*60*60*24",
});

Functions(Types)

There are total 6 functions available to show toast.

• For Success

  this._toast.success("Success", "This is a success message");

• For Error

  this._toast.error("Error", "This is a error message");

• For Info

  this._toast.info("Information", "This is a information");

• For Warning

  this._toast.warning("Warning", "This is a warning message");

• For Default Light

  this._toast.light("Light theme", "This is a light theme message");

  

• For Default Dark

  this._toast.dark("Dark theme", "This is a dark theme message");

  

Firts parameter is title, second is message, and third is options which is optional.

To show only message leave the title empty.

this._toast.warning("", "This is a warning message");

So it will look like this

Demo will clear a picture.