NgxToastf

Features

• Toast Component Injection without being passed ViewContainerRef
• Animations using Angular's

Dependencies

Latest version available for each version of Angular

| ngx-toastf | Angular | |------------|-------------| | 1.0.0 | 9.x 8.x 7.x |

Install

npm install ngx-toastf --save

@angular/animations package is a required dependency for the default toast

npm install @angular/animations --save

Setup

step 1: Add NgToastModule to appModule, make sure you have BrowserAnimationsModule as well

import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { ToastrModule } from 'ngx-toastf';

@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule, // required animations module
    NgToastModule // ToastrModule added
  ],
  bootstrap: [App],
  declarations: [App]
})
class MainModule {}

step 2: Add icons styles to angular.json file in styles array

"styles": [
  // other styles
  "./node_modules/ngx-toastf/src/assets/fontello/css/all.min.css"
],

Use

import { ToastrService } from 'ngx-toastf';

@Component({...})
export class YourComponent {
  constructor(private toastService: NgToastService) {}

  showToastSuccess() {
    this.toastr.showToastSuccess('Hello world!', { title: 'Test!' });
  }
}

Options

There are global options.

Global Options

Global options include the following options:

| Option | Type | Default | Description | |-------------|---------|---------------------------------|-------------------------------------------| | title | string | null | Title for toast message | | position | object | see below | Toast container position | | duration | number | 3000 | Time to live in milliseconds | | closeButton | boolean | false | Show close button | | tapDismiss | boolean | false | Close on click | | autoClose | boolean | true | Dismiss current toast when max is reached |

position defaults

NgToastPosition {
    BottomCenter = 0,
    BottomFullWidth = 1,
    BottomLeft = 2,
    BottomRight = 3,
    TopCenter = 4,
    TopFullWidth = 5,
    TopLeft = 6,
    TopRight = 7,
    Center = 8
};

Styles

Global Styles

| Class | Description | |-----------------------|-------------------------------------------| | toast-container | Toast container | | toast-container-title | Toast container title, and symbol | | toast-container-body | Toast container for message |

Toast type styles

For customizations styles you can overwrite those classes:

• .toast-container-success
• .toast-container-info
• .toast-container-warning
• .toast-container-error

  .toast-container {
    &-success {
      background-color: green !important;
    }
    &-error {
      background-color: pink !important;
    }
}

License

MIT

GitLab @darioegb  ·