Notifications

import { TgNotificationsComponent, NotificationService } from '@trademe/tangram';

Toast notifications are a way of displaying timely information to a member. Error states and success messages should be encoded into the component itself rather than displayed using the NotificationService. Consider consulting with a designer before using this service to see if the information can be encoded into your component instead of using a notification.

Example

Notification service

Types

interface INotificationOptions {
    dismissAfter?: number;
    persist?: boolean;
}

Notifications are dismissed automatically after 5000ms by default. This duration can be controlled with dismissAfter or disabled with persist. dismissAfter has no effect if persist is true.

Methods

success (message: string, options?: INotificationOptions): INotification

Show a success notification.

info (message: string, options?: INotificationOptions): INotification

Show a info notification.

warning (message: string, options?: INotificationOptions): INotification

Show a warning notification.

error (error: string | object, options?: INotificationOptions): INotification

Show a error notification. A full error object may be passed into this function and the message will be extracted from it.

disable (): void

Stop notifications from being fired and clean the notification list.

enable (): void

Resume notifications. Notifications sent while the service was disabled will not be recovered.

Notifications component

To display notifications, the tg-notifications component must be placed into the DOM. It should be placed high up in the DOM as a direct child of your application's main container. Only one of these is needed per-application, although you may need to include this additionally in any fullscreen take-over components if you wish to show notifications there.

<aside>
    <tg-notifications></tg-notifications>
</aside>