ngx-infi-toast
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

     

    MIT PRs styled with prettier

    Neat, fully customizable and lightweight notifications for your application.

    Table of Contents

    Installation

    Using npm:

    npm install ngx-infi-toast --save

    Configuration

    In order to display your first toast, you have to import NgxInfiToast module in the root module:

    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { NgxInfiToastModule } from 'ngx-infi-toast';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [
        // ...,
        NgxInfiToastModule
      ],
      providers: [],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

    Inject NgxInfiToastService into your component and display a toast notification with a specified message:

    import { NgxInfiToastService } from 'ngx-infi-toast';
     
    export class PaymentComponent implements OnInit {
      constructor(private toastService: NgxInfiToastService) {}
     
      ngOnInit() {}
    
      onPaymentReceived(): void {
          this.toastService.open('Payment has been succesfully processed!');
          // ..
      }
    }

    Provide custom configuration

    You can pass your own custom configuration object as a second parameter of the function. Available properties are following:

    Name Type Description
    width string width of displayed notification (default: 350px)
    contentColor string color of content text (default: #777777)
    iconColor string color of close icon (default: #5F95E1)
    headerText string top header text
    headerColor string color of header text (default: #000)
    data any data to be emitted in onClose observable after closing notification

    Handlers

    At this moment, function open returns a handler object which will be helpful to use for listening on specific actions related to a single notification.

    • onClose() - emits passed data in the configuration object on notification closure, if no data is passed to the configuration object, it will emit true by default, this can be generally used to keep track of the data associated with a specific notification.
      Example:
    const toast = this.toastService.open(
        'Payment has been succesfully processed!',
        {
            width: '500px',
            headerText: 'Payment received',
            data: {
                id: 1,
                type: 'payment',
                status: 'success'
            }
        }
    );
    
    toast.onClose().subscribe(data => {
        // data is equal to:
        // {
        //    id: 1,
        //    type: 'payment',
        //    status: 'success'
        // }
        // do something here...
    });

    Global configuration

    You can provide a global configuration which will be applied for all notifications in your application. All available properties are listed below.

    Name Type Description
    width string width of displayed notification (default: 350px)
    position 'left', 'center', 'right' notification alignment (default: center)
    contentColor string color of content text (default: #777777)
    iconColor string color of close icon (default: #5F95E1)
    headerColor string color of header text (default: #000)

    Example:

    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { NgxInfiToastModule } from 'ngx-infi-toast';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [
        // ...,
        NgxInfiToastModule.forRoot({
            width: '500px',
            position: 'left',
            contentColor: '#000',
            iconColor: '#000',
            headerColor: 'red'
        })
      ],
      providers: [],
      bootstrap: [AppComponent],
    })
    export class AppModule {}

    Important: global and component level configuration are merged together, therefore component level values will override global ones in case there is a common property that is included in both configuration objects.

    Demo

    The showcase of the library can be found under the following link.

    Future plans

    • possibility to stack toasts or show them one by one
    • display provided template or component in the toast

    Contribution

    This project follows the all-contributors specification. Contributions of any kind are welcome!

    Install

    npm i ngx-infi-toast

    DownloadsWeekly Downloads

    4

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    187 kB

    Total Files

    25

    Last publish

    Collaborators

    • infi_the_coder