dc-toast-ng v1.0.3

DEMO: https://dark-chicken-dc.github.io/dc-toast-ng/

Dependencies

Latest version available for each version of Angular

Install

npm i dc-toast-ng

Setup

step 1: add assets

• You can add it to your angular.json for icons and fonts

"assets": [
  {
    "glob": "**/*",
    "input": "./node_modules/dc-toast-ng/assets",
    "output": "/assets/"
  }
],

step 2: add DcToastNgModule to app NgModule

• Module based

import { DcToastNgModule } from 'dc-toast-ng';

@NgModule({
  imports: [
    DcToastNgModule // DcToastNgModule added
  ],
  bootstrap: [AppComponent],
  declarations: [AppComponent],
})
class MainModule {}

Use

import { DcToastService } from 'dc-toast-ng';
import { ToastModel } from 'dc-toast-ng/model/models.model';

@Component({...})
export class YourComponent {

  DCToast:ToastModel = {
    content: 'Dark Chicken Toast NG',
    time: 5,
    position: 'top-right',
    closeWithHover: true,
    closeButtonPosition: 'right',
    type: 'success',
    allowTimeBar: true,
    showCloseButton: true
  };

  constructor(private DcToastService: DcToastService) {}

  showToast() {
    this.DcToastService.create(this.DCToast: ToastModel)
  }
}

Options

Passed to DcToastService.create()

DcToast Service method return:

this.DcToastService.onHidden().subscribe((response)=> {
      //...
})
//The response value comes in BaseToastModel Type

export interface BaseToastModel {
    content: string,
    time: string,
    type: ToastType,
    closeButton: boolean,
    closeButtonPosition: ToastCloseButtonPositionType,
    allowTimeBar: boolean,
    closeWithHover: boolean,
    index: number,
    position: ToastPositionType
    icon?: SafeHtml
}

Functions

Create

Create a new dc-toast

DcToastService.create(toast: ToastModel);

Delete

Delete all dc-toasts

DcToastService.delete();

License

MIT

GitHub @skarahan35  ·  Github @ergulferik  ·