4.1 KiB

Raw Blame History

Toast Overlay

You can use the ToasterService in @abp/ng.theme.shared package to display messages in an overlay by placing at the root level in your project.

Getting Started

You do not have to provide the ToasterService at module or component level, because it is already provided in root. You can inject and start using it immediately in your components, directives, or services.

import { ToasterService } from '@abp/ng.theme.shared';

@Component({
  /* class metadata here */
})
class DemoComponent {
  constructor(private toaster: ToasterService) {}
}

Usage

You can use the success, warn, error, and info methods of ToasterService to display an overlay.

How to Display a Toast Overlay

this.toast.success('Message', 'Title')

The ToasterService methods accept three parameters that are message, title, and options.
success, warn, error, and info methods return the id of opened toast overlay. The toast can be removed with this id.

How to Display a Toast Overlay With Given Options

Options can be passed as the third parameter to success, warn, error, and info methods:

import { Toaster, ToasterService } from '@abp/ng.theme.shared';
//...

constructor(private toaster: ToasterService) {}

//...
const options: Partial<Toaster.ToastOptions> = {
    life: 10000,
    sticky: false,
    closable: true,
    tapToDismiss: true,
    messageLocalizationParams: ['Demo', '1'],
    titleLocalizationParams: []
  };

  this.toaster.error('AbpUi::EntityNotFoundErrorMessage', 'AbpUi::Error', options);

life option is the value in milliseconds that determines the closing time. Default value is 5000
sticky option is the boolean value. If the value passed true, toast overlay keep on the screen by ignoring the life option. Default value is false
closable option is the boolean value that displays the close icon over the toast overlay or not. Default value is true.
tapToDismiss option is the boolean value that allows closing the toast overlay by clicking over. Default value is false.
yesText is the text of the confirm button. A localization key or localization object can be passed. Default value is AbpUi::Yes
messageLocalizationParams is the interpolation parameters of the message localization.
titleLocalizationParams is the interpolation parameters of the title localization.

With the above options, the toast overlay looks like this:

### How to Remove a Toast Overlay

The open toast overlay can be removed manually via the remove method by passing the id of toast:

const toastId = this.toast.success('Message', 'Title')

this.toast.remove(toastId);

### How to Remove All Toasts

The all open toasts can be removed manually via the clear method:

this.toast.clear();

API

success

success(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Toaster.ToastOptions>,
): number

Config namespace can be imported from @abp/ng.core.
Toaster namespace can be imported from @abp/ng.theme.shared.

See the Config.LocalizationParam type and Toaster namespace

warn

warn(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Toaster.ToastOptions>,
): number

error

error(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Toaster.ToastOptions>,
): number

info

info(
  message: Config.LocalizationParam,
  title: Config.LocalizationParam,
  options?: Partial<Toaster.ToastOptions>,
): number

remove

remove(id: number): void

Removes an open toast by the given id.

clear

clear(): void

Removes all open toasts.

What's Next?

Config State

4.1 KiB Raw Blame History