ng-limeade
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    Build Status codecov npm npm bundle size

    Get toast notifications up and running in less than a minute with NgLimeade! No joke!

    Demo

    See NgLimeade in action HERE

    Dependencies

    Before installing NgLimeade, install the following Font Awesome dependencies:

    $ npm install @fortawesome/angular-fontawesome
    $ npm install @fortawesome/fontawesome-svg-core
    $ npm install @fortawesome/free-regular-svg-icons
    $ npm install @fortawesome/free-solid-svg-icons

    Installation

    $ npm install ng-limeade

    Basic Setup

    Import the ToastFactoryService into your root AppModule, and add the NgLimeadeModule to the imports array.

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
     
    import {NgLimeadeModule} from 'ng-limeade';
     
    @NgModule({
        imports: [
            BrowserModule,
            NgLimeadeModule
        ],
        declarations: [AppComponent],
        bootstrap: [AppComponent]
    })
    export class AppModule { }

    Add the limeade-toast-factory component to the top-level component ( in this case, app-root ) to ensure that toasts persist between routes.

    <div class="toasts-container">
      <limeade-toast-factory></limeade-toast-factory>
    </div>

    Inject the ToastFactoryService into your component and call the showToast function to trigger a new toast in your application. If you do not pass any configuration into the showToast function, a toast of type success will be created. For information on how to configure and create different types of toasts, see the Configuration section below.

     
    import {ToastFactoryService} from 'ng-limeade';
     
    @Component({...})
    export class AppComponent {
      constructor(private toastService: ToastFactoryService) {}
     
      showSuccessToast() {
        this.toastService.showToast();
      }
    }

    Configuration

    While NgLimeade was created to allow you to incorporate toast notifications in your application with minimal setup, the library provides many configuration options that will allow you to cater notifications to your needs.

    Types of Toasts

    There are four types of toasts currently available in NgLimeade:

    • Success
    • Info
    • Warning
    • Error

    Creating a Toast

    Import ToastInterface from 'ng-limeade' and create a new object of type ToastInterface and set your configuration settings. Pass the variable into the showToast function to display a new toast in your application.

     
    import {ToastFactoryService, ToastInterface} from 'ng-limeade';
     
    @Component({...})
    export class AppComponent {
      constructor(private toastService: ToastFactoryService) {}
     
      showSuccessToast() {
          const toast: ToastInterface = {
              type: 'warning',
              title: 'Warning!',
              description: 'Something went wrong!'
          };
        this.toastService.showToast(toast);
      }
    }

    Toast Options

    Option Type Default Description
    type 'success', 'info', 'warning', or 'error' 'success' Used to determine the type of toast to be created as well as the icon to be used
    title string 'Success!' The title to be shown inside the toast. The color is determined by the type of toast
    description string null The description displays below the title and can consist of multiple lines of text
    iconName string 'check' The Font Awesome icon name to be displayed inside the toast

    Install

    npm i ng-limeade

    DownloadsWeekly Downloads

    3

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    146 kB

    Total Files

    32

    Last publish

    Collaborators

    • braydoncoyer