File

projects/ngx-toastn/src/lib/ngx-toastn.component.ts

Description

Toasty is container for Toast components

Implements

OnInit

Metadata

selector ngx-toastn
templateUrl ngx-toastn.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(config: ToastyConfig, toastyService: NgxToastnService)
Parameters :
Name Type Optional
config ToastyConfig no
toastyService NgxToastnService no

Inputs

position

Type: string

Methods

Private _setTimeout
_setTimeout(toast: ToastData)

Custom setTimeout function for specific setTimeouts on individual toasts.

Parameters :
Name Type Optional
toast ToastData no
Returns : void
add
add(toast: ToastData)

Add new Toast

Parameters :
Name Type Optional
toast ToastData no
Returns : void
clear
clear(id: number)

Clear individual toast by id

Parameters :
Name Type Optional Description
id number no

is unique identifier of Toast

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 :
Name Type Optional
toast ToastData no
Returns : void
ngOnInit
ngOnInit()

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.

Returns : any

Properties

Private _position
_position: string
Type : string
Default value : ''
Static POSITIONS
POSITIONS: Array<String>
Type : Array<String>
Default value : [ 'bottom-right', 'bottom-left', 'top-right', 'top-left', 'top-center', 'bottom-center', 'center-center' ]

Set of constants defines position of Toasty on the page.

toasts
toasts: Array<ToastData>
Type : Array<ToastData>
Default value : []

Accessors

position
getposition()
setposition(value: string)
Parameters :
Name Type Optional
value string no
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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""