Smoking Hot Angular Notifications – hot-toast

Description:

Lightweight, customizable, and beautiful toast notifications for Angular apps.

Features:

• Hot by default
• Easy to use
• Accessible
• Reduce motion support
• Emoji Support
• Customizable
• Observable API
• Pause on hover
• Events
• Persistent

How to use it:

1. Install and import the module.

# NPM
$ npm i @ngneat/overview@1 @ngneat/hot-toast

import { HotToastModule } from '@ngneat/hot-toast';
@NgModule({
  imports: [HotToastModule.forRoot()],
})
class AppModule {}

2. Create toast notification of different types as follows:

import { HotToastService } from '@ngneat/hot-toast';
@Component({})
export class AppComponent {
  constructor(private toast: HotToastService) {}
  showToast() {
    this.toast.show('Basic Notification!');
    this.toast.loading('Loading...');
    this.toast.success('Success Toast');
    this.toast.warning('Warning Toast');
    this.toast.error('Error Toast');
  }
  update() {
    saveSettings.pipe(
      this.toast.observe(
        {
          loading: 'Saving...',
          success: 'Settings saved!',
          error: 'Could not save.',
        }
      )
    ).subscribe();
  }
}

3. Default toast options.

/**
* Unique id to associate with hot-toast.
* There can't be multiple hot-toasts opened with same id.
*
* @default Date.now().toString()
*/
id: string;

/** The message to show in the hot-toast. */
message: Content;

/**
* Role of the live region.
*
* @default status
*/
role: ToastRole;

/** aria-live value for the live region.
*
* @default polite
*/
ariaLive: ToastAriaLive;

/**Icon to show in the hot-toast */
icon?: Content;

/**
* Duration in milliseconds after which hot-toast will be auto closed.
* Can be disabled via `autoClose: false`
*
* @default 3000 | error = 4000 | loading = 30000
*/
duration?: number;

/**
* Show close button in hot-toast
*
* @default false
*/
dismissible?: boolean;

/**
* Auto close hot-toast after duration
*
* @default true
*/
autoClose?: boolean;

/**Extra styles to apply for hot-toast */
style?: any;

/**Extra CSS classes to be added to the hot toast container. */
className?: string;

/**Use this to change icon color */
iconTheme?: IconTheme;

/**
* Visual appearance of hot-toast
*
* @default toast
*/
theme?: ToastTheme;

/**
* The position to place the hot-toast.
*
* @default top-center
*/
position?: ToastPosition;

/**Extra styles to apply for close button */
closeStyle?: any;

createdAt: number;
visible: boolean;
height?: number;

observableMessages?: ObservableMessages<unknown, DataType>;

/**
* Useful when you want to keep a persistance for toast based on ids, across sessions.
*
* @example
* // Lets say you want show hot-toast, with a particular id,
* // max 3 times to a user irrespective of browser session.
* // In this case you will set this as:
* { enabled: true, count: 3 }
*
* @type {ToastPersistConfig}
*/
persist?: ToastPersistConfig;

/**
* Allows you to pass injector for your component
*
* @since 1.1.0
* @type {Injector}
* @memberof Toast
*/
injector?: Injector;

/**
* Allows you to pass data for your component/template
*
* @since 2.0.0
* @type {DataType}
* @memberof Toast
*/
data?: DataType;

Preview: