ngx-toastr

ngx-toastr

Version 20.0.5
Published 18 days ago
175 kB
1 dependency
MIT license

Install

npm i ngx-toastr

yarn add ngx-toastr

pnpm add ngx-toastr

Overview

<div align="center"> <img src="https://raw.githubusercontent.com/scttcper/ngx-toastr/master/misc/documentation-assets/ngx-toastr-example.png" width="300" alt="Angular Toastr"> <br> <h1>ngx-toastr</h1> <br> <a href="https://www.npmjs.org/package/

Index

Variables

variable DefaultGlobalConfig

const DefaultGlobalConfig: GlobalConfig<unknown>;

variable DefaultNoAnimationsGlobalConfig

const DefaultNoAnimationsGlobalConfig: GlobalConfig<unknown>;

variable DefaultNoComponentGlobalConfig

const DefaultNoComponentGlobalConfig: GlobalConfig<unknown>;

variable TOAST_CONFIG

const TOAST_CONFIG: InjectionToken<ToastToken>;

Functions

function provideToastr

provideToastr: (config?: Partial<GlobalConfig>) => EnvironmentProviders;

Provides the TOAST_CONFIG token with the given config.
Parameter config
The config to configure toastr.
Returns
The environment providers.
Example 1
```ts import { provideToastr } from 'ngx-toastr';
bootstrap(AppComponent, { providers: [ provideToastr({ timeOut: 2000, positionClass: 'toast-top-right', }), ], })

Classes

class BasePortalHost

abstract class BasePortalHost {}

Partial implementation of PortalHost that only deals with attaching a ComponentPortal

method attach

attach: (
    portal: ComponentPortal<unknown>,
    newestOnTop: boolean
) => ComponentRef<unknown>;

method attachComponentPortal

abstract attachComponentPortal: <T>(
    portal: ComponentPortal<T>,
    newestOnTop: boolean
) => ComponentRef<T>;

method detach

detach: () => void;

method setDisposeFn

setDisposeFn: (fn: () => void) => void;

class ComponentPortal

class ComponentPortal<T> {}

A ComponentPortal is a portal that instantiates some Component upon attachment.

constructor

constructor(component: ComponentType<T>, injector: Injector);

property component

component: ComponentType<T>;

The type of the component that will be instantiated for attachment.

property injector

injector: Injector;

Injector used for the instantiation of the component.

property isAttached

readonly isAttached: boolean;

Whether this portal is attached to a host.

property viewContainerRef

viewContainerRef: ViewContainerRef;

[Optional] Where the attached component should live in Angular's *logical* component tree. This is different from where the component *renders*, which is determined by the PortalHost. The origin necessary when the host is outside of the Angular application context.

method attach

attach: (host: BasePortalHost, newestOnTop: boolean) => ComponentRef<unknown>;

Attach this portal to a host.

method detach

detach: () => void;

Detach this portal from its host

method setAttachedHost

setAttachedHost: (host?: BasePortalHost) => void;

Sets the PortalHost reference without performing attach(). This is used directly by the PortalHost when it is performing an attach() or detach().

class Overlay

class Overlay {}

Service to create Overlays. Overlays are dynamically added pieces of floating UI, meant to be used as a low-level building building block for other components. Dialogs, tooltips, menus, selects, etc. can all be built using overlays. The service should primarily be used by authors of re-usable components rather than developers building end-user applications.
An overlay *is* a PortalHost, so any kind of Portal can be loaded into one.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<Overlay, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<Overlay>;

method create

create: (
    positionClass?: string,
    overlayContainer?: ToastContainerDirective
) => OverlayRef;

Creates an overlay.
Returns
A reference to the created overlay.

method getPaneElement

getPaneElement: (
    positionClass?: string,
    overlayContainer?: ToastContainerDirective
) => HTMLElement;

class OverlayContainer

class OverlayContainer implements OnDestroy {}

Container inside which all toasts will render.

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<OverlayContainer, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<OverlayContainer>;

method getContainerElement

getContainerElement: () => HTMLElement;

This method returns the overlay container element. It will lazily create the element the first time it is called to facilitate using the container in non-browser environments.
Returns
the container element

method ngOnDestroy

ngOnDestroy: () => void;

class OverlayRef

class OverlayRef {}

Reference to an overlay that has been created with the Overlay service. Used to manipulate or dispose of said overlay.

constructor

constructor(_portalHost: BasePortalHost);

method attach

attach: (
    portal: ComponentPortal<unknown>,
    newestOnTop?: boolean
) => ComponentRef<unknown>;

method detach

detach: () => void;

Detaches an overlay from a portal.
Returns
Resolves when the overlay has been detached.

class Toast

class Toast<ConfigPayload = unknown> extends ToastBase<ConfigPayload> {}

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    Toast<any>,
    '[toast-component]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<Toast<any>, never>;

property params

readonly params: { easeTime: string | number; easing: string };

method remove

remove: () => void;

class ToastContainerDirective

class ToastContainerDirective {}

property ɵdir

static ɵdir: i0.ɵɵDirectiveDeclaration<
    ToastContainerDirective,
    '[toastContainer]',
    ['toastContainer'],
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ToastContainerDirective, never>;

method getContainerElement

getContainerElement: () => HTMLElement;

class ToastNoAnimation

class ToastBase<ConfigPayload = unknown> implements OnDestroy {}

constructor

constructor();

property afterActivateSubscription

protected afterActivateSubscription: Subscription;

property appRef

protected appRef: ApplicationRef;

property countDuplicateSubscription

protected countDuplicateSubscription: Subscription;

property displayStyle

readonly displayStyle: i0.Signal<string>;

hides component when waiting to be displayed

property duplicatesCount

duplicatesCount: number;

property hideTime

protected hideTime: number;

property intervalId

protected intervalId: number;

property manualClosedSubscription

protected manualClosedSubscription: Subscription;

property message

readonly message: i0.Signal<string>;

property options

readonly options: i0.WritableSignal<IndividualConfig<ConfigPayload>>;

property originalTimeout

readonly originalTimeout: i0.Signal<number>;

property ɵcmp

static ɵcmp: i0.ɵɵComponentDeclaration<
    ToastBase<any>,
    '[toast-component]',
    never,
    {},
    {},
    never,
    never,
    true,
    never
>;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ToastBase<any>, never>;

property state

readonly state: i0.WritableSignal<'inactive' | 'active' | 'removed'>;

property timeout

protected timeout: number;

property timeoutResetSubscription

protected timeoutResetSubscription: Subscription;

property timeoutsService

protected timeoutsService: TimeoutsService;

property title

readonly title: i0.Signal<string>;

property toastClasses

readonly toastClasses: i0.Signal<string>;

property toastPackage

toastPackage: ToastPackage<any>;

property toastrService

protected toastrService: ToastrService;

property width

readonly width: i0.WritableSignal<number>;

width of progress bar

method activateToast

activateToast: () => void;

activates toast and sets timeout

method delayedHideToast

delayedHideToast: () => void;

method ngOnDestroy

ngOnDestroy: () => void;

method remove

remove: () => void;

tells toastrService to remove this toast after animation time

method resetTimeout

resetTimeout: () => void;

method stickAround

stickAround: () => void;

method tapToast

tapToast: () => void;

method updateProgress

updateProgress: () => void;

updates progress bar width

class ToastNoAnimationModule

class ToastNoAnimationModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ToastNoAnimationModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<ToastNoAnimationModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    ToastNoAnimationModule,
    never,
    [typeof ToastBase],
    [typeof ToastBase]
>;

method forRoot

static forRoot: (
    config?: Partial<GlobalConfig>
) => ModuleWithProviders<ToastNoAnimationModule>;

class ToastPackage

class ToastPackage<ConfigPayload = unknown> {}

Everything a toast needs to launch

constructor

constructor(
    toastId: number,
    config: IndividualConfig<ConfigPayload>,
    message: string,
    title: string,
    toastType: string,
    toastRef: ToastRef<unknown>
);

property config

config: IndividualConfig<ConfigPayload>;

property message

message: string;

property title

title: string;

property toastId

toastId: number;

property toastRef

toastRef: ToastRef<unknown>;

property toastType

toastType: string;

method onAction

onAction: () => Observable<unknown>;

method onTap

onTap: () => Observable<void>;

method triggerAction

triggerAction: (action?: unknown) => void;

available for use in custom toast

method triggerTap

triggerTap: () => void;

Fired on click

class ToastrComponentlessModule

class ToastrComponentlessModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ToastrComponentlessModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<ToastrComponentlessModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    ToastrComponentlessModule,
    never,
    never,
    never
>;

method forRoot

static forRoot: (
    config?: Partial<GlobalConfig>
) => ModuleWithProviders<ToastrModule>;

class ToastRef

class ToastRef<T> {}

Reference to a toast opened via the Toastr service.

constructor

constructor(_overlayRef: OverlayRef);

property componentInstance

componentInstance: {};

The instance of component opened into the toast.

method activate

activate: () => void;

method afterActivate

afterActivate: () => Observable<void>;

Gets an observable that is notified when the toast has started opening.

method afterClosed

afterClosed: () => Observable<void>;

Gets an observable that is notified when the toast is finished closing.

method close

close: () => void;

Close the toast.

method countDuplicate

countDuplicate: () => Observable<number>;

method isInactive

isInactive: () => boolean;

method manualClose

manualClose: () => void;

method manualClosed

manualClosed: () => Observable<unknown>;

method onDuplicate

onDuplicate: (resetTimeout: boolean, countDuplicate: boolean) => void;

Reset the toast timouts and count duplicates

method timeoutReset

timeoutReset: () => Observable<unknown>;

class ToastrModule

class ToastrModule {}

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ToastrModule, never>;

property ɵinj

static ɵinj: i0.ɵɵInjectorDeclaration<ToastrModule>;

property ɵmod

static ɵmod: i0.ɵɵNgModuleDeclaration<
    ToastrModule,
    never,
    [typeof Toast],
    [typeof Toast]
>;

method forRoot

static forRoot: (
    config?: Partial<GlobalConfig>
) => ModuleWithProviders<ToastrModule>;

class ToastrService

class ToastrService {}

constructor

constructor();

property currentlyActive

currentlyActive: number;

property overlayContainer

overlayContainer?: ToastContainerDirective;

property ɵfac

static ɵfac: i0.ɵɵFactoryDeclaration<ToastrService, never>;

property ɵprov

static ɵprov: i0.ɵɵInjectableDeclaration<ToastrService>;

property previousToastMessage

previousToastMessage: string;

property toastrConfig

toastrConfig: GlobalConfig<unknown>;

property toasts

toasts: ActiveToast<unknown>[];

method clear

clear: (toastId?: number) => void;

Remove all or a single toast by id

method error

error: <ConfigPayload = unknown>(
    message?: string,
    title?: string,
    override?: Partial<IndividualConfig<ConfigPayload>>
) => ActiveToast<unknown>;

show error toast

method findDuplicate

findDuplicate: (
    title: string,
    message: string,
    resetOnDuplicate: boolean,
    countDuplicates: boolean
) => ActiveToast<unknown>;

Determines if toast message is already shown

method info

info: <ConfigPayload = unknown>(
    message?: string,
    title?: string,
    override?: Partial<IndividualConfig<ConfigPayload>>
) => ActiveToast<unknown>;

show info toast

method remove

remove: (toastId: number) => boolean;

Remove and destroy a single toast by id

method show

show: <
    C extends ToastBase<unknown> = ToastBase<unknown>,
    ConfigPayload = unknown
>(
    message?: string,
    title?: string,
    override?: Partial<IndividualConfig<ConfigPayload>>,
    type?: string
) => ActiveToast<C> | null;

show toast

method success

success: <ConfigPayload = unknown>(
    message?: string,
    title?: string,
    override?: Partial<IndividualConfig<ConfigPayload>>
) => ActiveToast<unknown>;

show successful toast

method warning

warning: <ConfigPayload = unknown>(
    message?: string,
    title?: string,
    override?: Partial<IndividualConfig<ConfigPayload>>
) => ActiveToast<unknown>;

show warning toast

Interfaces

interface ActiveToast

interface ActiveToast<C> {}

property message

message: string;

the message of your toast. Stored to prevent duplicates

property onAction

onAction: Observable<unknown>;

available for your use in custom toast

property onHidden

onHidden: Observable<void>;

triggered when toast is destroyed

property onShown

onShown: Observable<void>;

triggered when toast is active

property onTap

onTap: Observable<void>;

triggered on toast click

property portal

portal: ComponentRef<C>;

a reference to the component see portal.ts

property title

title: string;

the title of your toast. Stored to prevent duplicates

property toastId

toastId: number;

Your Toast ID. Use this to close it individually

property toastRef

toastRef: ToastRef<C>;

a reference to your toast

interface GlobalConfig

interface GlobalConfig<C = unknown> extends IndividualConfig<C> {}

Global Toast configuration Includes all IndividualConfig

property autoDismiss

autoDismiss: boolean;

dismiss current toast when max is reached default: false

property countDuplicates

countDuplicates: boolean;

display the number of duplicate messages default: false

property iconClasses

iconClasses: Partial<ToastrIconClasses>;

property includeTitleDuplicates

includeTitleDuplicates: boolean;

consider the title of a toast when checking if duplicate default: false

property maxOpened

maxOpened: number;

max toasts opened. Toasts will be queued Zero is unlimited default: 0

property preventDuplicates

preventDuplicates: boolean;

block duplicate messages default: false

property resetTimeoutOnDuplicate

resetTimeoutOnDuplicate: boolean;

Reset toast timeout when there's a duplicate (preventDuplicates needs to be set to true) default: false

interface IndividualConfig

interface IndividualConfig<ConfigPayload = unknown> {}

Configuration for an individual toast.

property closeButton

closeButton: boolean;

toast show close button default: false

property disableTimeOut

disableTimeOut: DisableTimoutType;

disable both timeOut and extendedTimeOut default: false

property easeTime

easeTime: string | number;

animation ease time on toast default: 300

property easing

easing: string;

animation easing on toast default: ease-in

property enableHtml

enableHtml: boolean;

render html in toast message (possibly unsafe) default: false

property extendedTimeOut

extendedTimeOut: number;

time to close after a user hovers over toast default: 1000

property messageClass

messageClass: string;

css class on toast message default: toast-message

property newestOnTop

newestOnTop: boolean;

New toast placement default: true

property onActivateTick

onActivateTick: boolean;

Helps show toast from a websocket or from event outside Angular default: false

property payload

payload?: ConfigPayload;

Payload to pass to the toast component

property positionClass

positionClass: string;

css class on toast container default: toast-top-right

property progressAnimation

progressAnimation: ProgressAnimationType;

changes toast progress bar animation default: decreasing

property progressBar

progressBar: boolean;

show toast progress bar default: false

property tapToDismiss

tapToDismiss: boolean;

clicking on toast dismisses it default: true

property timeOut

timeOut: number;

toast time to live in milliseconds default: 5000

property titleClass

titleClass: string;

css class on toast title default: toast-title

property toastClass

toastClass: string;

css class on toast component default: ngx-toastr

property toastComponent

toastComponent?: ComponentType<unknown>;

Angular toast component to be shown default: Toast

interface ToastrIconClasses

interface ToastrIconClasses {}

property error

error: string;

property info

info: string;

property success

success: string;

property warning

warning: string;

index signature

[key: string]: string;

interface ToastToken

interface ToastToken {}

property config

config: Partial<GlobalConfig>;

property default

default: GlobalConfig;

Type Aliases

type ComponentType

type ComponentType<T> = new (...args: unknown[]) => T;

type DisableTimoutType

type DisableTimoutType = boolean | 'timeOut' | 'extendedTimeOut';

type ProgressAnimationType

type ProgressAnimationType = 'increasing' | 'decreasing';

Package Files (1)

types/ngx-toastr.d.ts

Dependencies (1)

tslib

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (3)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/ngx-toastr.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/ngx-toastr)

HTML

<a href="https://www.jsdocs.io/package/ngx-toastr"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 17 days ago.
Package analyzed in 4367 ms.
Missing or incorrect documentation? Open an issue for this package.

ngx-toastr

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable DefaultGlobalConfig

variable DefaultNoAnimationsGlobalConfig

variable DefaultNoComponentGlobalConfig

variable TOAST_CONFIG

Functions

function provideToastr

Parameter config

Returns

Example 1

Classes

class BasePortalHost

method attach

method attachComponentPortal

method detach

method setDisposeFn

class ComponentPortal

constructor

property component

property injector

property isAttached

property viewContainerRef

method attach

method detach

method setAttachedHost

class Overlay

property ɵfac

property ɵprov

method create

Returns

method getPaneElement

class OverlayContainer

property ɵfac

property ɵprov

method getContainerElement

Returns

method ngOnDestroy

class OverlayRef

constructor

method attach

method detach

Returns

class Toast

property ɵcmp

property ɵfac

property params

method remove

class ToastContainerDirective

property ɵdir

property ɵfac

method getContainerElement

class ToastNoAnimation

constructor

property afterActivateSubscription

property appRef

property countDuplicateSubscription

property displayStyle

property duplicatesCount

property hideTime

property intervalId

property manualClosedSubscription

property message

property options

property originalTimeout

property ɵcmp

property ɵfac

property state

property timeout

property timeoutResetSubscription

property timeoutsService

property title