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.