projects/ngx-toastn/src/lib/ngx-toastn.component.ts
Toasty is container for Toast components
| selector | ngx-toastn |
| templateUrl | ngx-toastn.component.html |
Properties |
Methods |
|
Inputs |
constructor(config: ToastyConfig, toastyService: NgxToastnService)
|
|||||||||
|
Parameters :
|
position
|
Type: |
| Private _setTimeout | ||||||
_setTimeout(toast: ToastData)
|
||||||
|
Custom setTimeout function for specific setTimeouts on individual toasts.
Parameters :
Returns :
void
|
| add | ||||||
add(toast: ToastData)
|
||||||
|
Add new Toast
Parameters :
Returns :
void
|
| clear | ||||||||
clear(id: number)
|
||||||||
|
Clear individual toast by id
Parameters :
Returns :
void
|
| clearAll |
clearAll()
|
|
Clear all toasts
Returns :
void
|
| closeToast | ||||||
closeToast(toast: ToastData)
|
||||||
|
Event listener of 'closeToast' event comes from ToastyComponent. This method removes ToastComponent assosiated with this Toast.
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
any
|
| Private _position |
_position:
|
Type : string
|
Default value : ''
|
| toasts |
toasts:
|
Type : Array<ToastData>
|
Default value : []
|
| position | ||||||
getposition()
|
||||||
setposition(value: string)
|
||||||
|
Parameters :
Returns :
void
|
import { Component, Input, OnInit } from '@angular/core';
import { isFunction } from './toasty.utils';
import { NgxToastnService, ToastData, ToastyConfig, ToastyEvent, ToastyEventType } from './ngx-toastn.service';
/**
* Toasty is container for Toast components
*/
@Component({
// tslint:disable-next-line component-selector
selector: 'ngx-toastn',
templateUrl: 'ngx-toastn.component.html'
})
export class NgxToastnComponent implements OnInit {
/**
* Set of constants defines position of Toasty on the page.
*/
static POSITIONS: Array<String> = [
'bottom-right',
'bottom-left',
'top-right',
'top-left',
'top-center',
'bottom-center',
'center-center'
];
private _position = '';
// The window position where the toast pops up. Possible values:
// - bottom-right (default value from ToastConfig)
// - bottom-left
// - top-right
// - top-left
// - top-center
// - bottom-center
// - center-center
@Input() set position(value: string) {
if (value) {
let notFound = true;
for (let i = 0; i < NgxToastnComponent.POSITIONS.length; i++) {
if (NgxToastnComponent.POSITIONS[i] === value) {
notFound = false;
break;
}
}
if (notFound) {
// Position was wrong - clear it here to use the one from config.
value = this.config.position;
}
} else {
value = this.config.position;
}
this._position = 'toasty-position-' + value;
}
get position(): string {
return this._position;
}
// The storage for toasts.
toasts: Array<ToastData> = [];
constructor(private config: ToastyConfig, private toastyService: NgxToastnService) {
// Initialise position
this.position = '';
}
/**
* `ngOnInit` is called right after the directive's data-bound properties have been checked for the
* first time, and before any of its children have been checked. It is invoked only once when the
* directive is instantiated.
*/
ngOnInit(): any {
// We listen events from our service
this.toastyService.events.subscribe((event: ToastyEvent) => {
if (event.type === ToastyEventType.ADD) {
// Add the new one
const toast: ToastData = event.value;
this.add(toast);
} else if (event.type === ToastyEventType.CLEAR) {
// Clear the one by number
const id: number = event.value;
this.clear(id);
} else if (event.type === ToastyEventType.CLEAR_ALL) {
// Lets clear all toasts
this.clearAll();
}
});
}
/**
* Event listener of 'closeToast' event comes from ToastyComponent.
* This method removes ToastComponent assosiated with this Toast.
*/
closeToast(toast: ToastData) {
this.clear(toast.id);
}
/**
* Add new Toast
*/
add(toast: ToastData) {
// If we've gone over our limit, remove the earliest
// one from the array
if (this.toasts.length >= this.config.limit) {
this.toasts.shift();
}
// Add toasty to array
this.toasts.push(toast);
//
// If there's a timeout individually or globally,
// set the toast to timeout
if (toast.timeout) {
this._setTimeout(toast);
}
}
/**
* Clear individual toast by id
* @param id is unique identifier of Toast
*/
clear(id: number) {
if (id) {
this.toasts.forEach((value: any, key: number) => {
if (value.id === id) {
if (value.onRemove && isFunction(value.onRemove)) {
value.onRemove.call(this, value);
}
this.toasts.splice(key, 1);
}
});
} else {
throw new Error('Please provide id of Toast to close');
}
}
/**
* Clear all toasts
*/
clearAll() {
this.toasts.forEach((value: any, key: number) => {
if (value.onRemove && isFunction(value.onRemove)) {
value.onRemove.call(this, value);
}
});
this.toasts = [];
}
/**
* Custom setTimeout function for specific setTimeouts on individual toasts.
*/
private _setTimeout(toast: ToastData) {
window.setTimeout(() => {
this.clear(toast.id);
}, toast.timeout);
}
}
<div id="toasty" [ngClass]="[position]">
<ngx-toast *ngFor="let toast of toasts" [toast]="toast" (closeToast)="closeToast(toast)"></ngx-toast>
</div>