@thaisrr/ngx-toaster v0.0.1

Ngx-Toaster

Ngx-Toaster is a library for Angular, designed to create alerts and toasts easily. There are four levels of alerts: success, info, warning, and error. It is possible to configure the disposition of the toasts, and the colors used are WCAG compliant (level AAA).

Installation

1. Import NgxToasterModule in the desired module (e.g., AppModule).
2. Add the <ngx-toast></ngx-toast> tag in the desired component (e.g., AppComponent).
3. Inject NgxToastService where you want to create a toast (e.g., a component or another service).
4. Use the create method to create the toast with the desired configurations.

In you module

import {NgxToastModule} from "./ngx-toast.module";
import {NgModule} from "@angular/core";

@NgModule({
  declarations: [/* your components or pipes */],
  imports: [
    NgxToastModule,
    /* your other imports */
  ]
})

In your template

The <ngx-toaster></ngx-toaster> component should be placed where you want yours toasts to be displayed. If you use the toaster in your entire application, we recommend that you import the toast in AppModule, and put the tag in app.component.html, at the bottom of the template.

Usage

Creating a toast

To display a toast, you only need to inject NgxToastService, and use the methode create().

The create() methode take an object as parameter, to configure the toast :

• message : string ( required ) the message you want to display,
• level : string ( success, info, warn, error ) the level of the alerte. Default is info,
• icon : string the name of the icon you want to display. Default is material icon ''info',
• duration : number ( 3000, 5000, 8000, 10000 ) the time, in ms, you want your toast to be displayed. Default is '5000'

Basic Exemple

import { Component } from '@angular/core';
import { NgxToastService } from 'ngx-toaster';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showToast()">Show Toast</button>
    <ngx-toast></ngx-toast>
  `
})
export class AppComponent {
  constructor(private toastService: NgxToastService) {}

  showToast() {
    this.toastService.create({
      message: 'Hello World!',
      level: 'success',
      duration: 3000,
      icon: 'info'
    });
  }
}