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

Dependencies

Latest version available for each version of Angular

Install

1npm i dc-toast-ng

Setup

step 1: add assets

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

1"assets": [
2  {
3    "glob": "**/*",
4    "input": "./node_modules/dc-toast-ng/assets",
5    "output": "/assets/"
6  }
7],

step 2: add DcToastNgModule to app NgModule

• Module based

1
2import { DcToastNgModule } from 'dc-toast-ng';
3
4@NgModule({
5  imports: [
6    DcToastNgModule // DcToastNgModule added
7  ],
8  bootstrap: [AppComponent],
9  declarations: [AppComponent],
10})
11class MainModule {}

Use

1import { DcToastService } from 'dc-toast-ng';
2import { ToastModel } from 'dc-toast-ng/model/models.model';
3
4@Component({...})
5export class YourComponent {
6
7  DCToast:ToastModel = {
8    content: 'Dark Chicken Toast NG',
9    time: 5,
10    position: 'top-right',
11    closeWithHover: true,
12    closeButtonPosition: 'right',
13    type: 'success',
14    allowTimeBar: true,
15    showCloseButton: true
16  };
17
18  constructor(private DcToastService: DcToastService) {}
19
20  showToast() {
21    this.DcToastService.create(this.DCToast: ToastModel)
22  }
23}

Options

Passed to DcToastService.create()

Option	Type	Default	Description
content	string	null	Determines the content within the toast message.
position	string	'top-right'	Allows the toast to be created in the specified position.
type	string	'success'	Determines what type of toast will be created.
time	number	0 ( infinity )	Determines how long toast will be active.
closeButtonPosition	string	'right'	The position of the close button inside toast.
closeWithHover	boolean	true	It closes when you exit to toast with the mouse.
allowTimeBar	boolean	true	The value that allows the time bar to be displayed.
showCloseButton	boolean	true	The value of whether there will be a close button or not.

DcToast Service method return:

1this.DcToastService.onHidden().subscribe((response)=> {
2      //...
3})
4//The response value comes in BaseToastModel Type
5
6export interface BaseToastModel {
7    content: string,
8    time: string,
9    type: ToastType,
10    closeButton: boolean,
11    closeButtonPosition: ToastCloseButtonPositionType,
12    allowTimeBar: boolean,
13    closeWithHover: boolean,
14    index: number,
15    position: ToastPositionType
16    icon?: SafeHtml
17}

Functions

Create

Create a new dc-toast

1DcToastService.create(toast: ToastModel);

Delete

Delete all dc-toasts

1DcToastService.delete();

License

MIT

---

GitHub @skarahan35  ·  Github @ergulferik  · 

Standalone Kullanım

Artık dc-toast-ng tamamen standalone bir Angular bileşenidir. Modül import etmeye gerek yoktur.

Kurulum

1import { DcToastComponent } from 'dc-toast-ng';

veya bir feature/component dosyanızda:

1@Component({
2  // ...
3  imports: [DcToastComponent],
4  standalone: true,
5  // ...
6})

Kullanım

1<dc-toast-ng></dc-toast-ng>

Not: Servisleri kullanmak için herhangi bir değişiklik yapmanıza gerek yoktur. DcToastService ve IconService otomatik olarak root'a enjekte edilir.