ngx-toastf v1.2.1

NgxToastf

Features

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

Dependencies

Latest version available for each version of Angular

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:

position defaults

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

Styles

Global Styles

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  ·