Toast

Toasts display status messages or feedback that is directly related to an action.

´ Loading interactive demo...
<button dt-button (click)="createToast()">Save</button> export class ToastDefaultExample { constructor(private _toast: DtToast) {} createToast(): void { this._toast.create('Your changes have been saved!'); } } <button dt-button (click)="createToast()">Save</button> export class ToastDefaultExample { constructor(private _toast: DtToast) {} createToast(): void { this._toast.create('Your changes have been saved!'); } }

It is crucial to show short to the point messages that can be perceived easily. Therefore, toasts only support messages up to 120 characters. They can not contain any actions or icons. They are not clickable.

Placement

Toasts appear on the bottom of the screen, above all other elements. Toasts are not blocking any user input.

Behavior

Only one toast message can be displayed at a time. They automatically time out and disappear from the screen.

Animation

The timeframe a message is displayed depends on the number of characters. Fade-in and fade-out animations last 150 ms.

A full animation circle consists of

  • fade-in animation (f = 150ms)
  • time to perceive the information (p = 500ms)
  • time to read and understand the text (r * Number of characters) (r = 50ms)
  • and fade-out (f = 150ms)

Animation time = (f + p + (r * Number of characters) + f);

As the maximum number of characters is 120, therfore, the display time of a toast can not be longer than 6800 ms. The minumu display time is 2000ms to guarantee that the message can be perceived by the user.

Example

The toast message has 30 characters. animation_example = 150 + 500 + (50 * 30) + 150 animation_example = 2300

This results in an animation time of 2300 ms.

´ Loading interactive demo...
<dt-form-field> <dt-label>Message</dt-label> <input type="text" dtInput [(ngModel)]="message" placeholder="Your message" /> </dt-form-field> <p>Current message: {{ message }}</p> <p *ngIf="elapsedTime"> Time elapsed since opening: {{ elapsedTime | async }}ms </p> <button dt-button (click)="createToast()">Save</button> export class ToastDynamicMsgExample { message = ''; toastRef: DtToastRef | null = null; elapsedTime: Observable<number>; constructor(private _toast: DtToast) {} createToast(): void { this.toastRef = this._toast.create(this.message); if (this.toastRef) { this.elapsedTime = timer(0, TIMERINTERVAL).pipe( takeUntil(this.toastRef.afterDismissed()), map((count: number) => TIMERINTERVAL * count), ); } } } <dt-form-field> <dt-label>Message</dt-label> <input type="text" dtInput [(ngModel)]="message" placeholder="Your message" /> </dt-form-field> <p>Current message: {{ message }}</p> <p *ngIf="elapsedTime"> Time elapsed since opening: {{ elapsedTime | async }}ms </p> <button dt-button (click)="createToast()">Save</button> export class ToastDynamicMsgExample { message = ''; toastRef: DtToastRef | null = null; elapsedTime: Observable<number>; constructor(private _toast: DtToast) {} createToast(): void { this.toastRef = this._toast.create(this.message); if (this.toastRef) { this.elapsedTime = timer(0, TIMERINTERVAL).pipe( takeUntil(this.toastRef.afterDismissed()), map((count: number) => TIMERINTERVAL * count), ); } } }

The DtToast service provides the possibility to show a temporary message to the user. The duration the toast is shown is calculated based on the message length. Dismissing the toast is paused while the user is hovering the message.

Imports

You have to import the DtToastModule when you want to use the DtToast service. The DtToast service component also requires Angular's BrowserAnimationsModule for animations. For more details on this see Step 2: Animations in the Getting started Guide.

@NgModule({
  imports: [DtToastModule],
})
class MyModule {}

Initialization

You can get the DtToast instance with DI in any of your components. The DtToast ensures that there is only one toast open at one time.

...
constructor(private _dtToast: DtToast) {}
...

Methods

The DtToast service has the following two methods:

create(message: string): DtToastRef | null

creates a new toast with the given message and returns the ref to the created toast. The toast duration is calculated based on the message length and gets dismissed automatically after the time passed. If the message is empty no toast will be created and null is returned.

dismiss(): void

Dismisses the currently displayed toast. Can be used if a toast needs to be dismissed before the calculated time passes.

Examples

Default

´ Loading interactive demo...
<button dt-button (click)="createToast()">Save</button> export class ToastDefaultExample { constructor(private _toast: DtToast) {} createToast(): void { this._toast.create('Your changes have been saved!'); } } <button dt-button (click)="createToast()">Save</button> export class ToastDefaultExample { constructor(private _toast: DtToast) {} createToast(): void { this._toast.create('Your changes have been saved!'); } }

Dynamic message

´ Loading interactive demo...
<dt-form-field> <dt-label>Message</dt-label> <input type="text" dtInput [(ngModel)]="message" placeholder="Your message" /> </dt-form-field> <p>Current message: {{ message }}</p> <p *ngIf="elapsedTime"> Time elapsed since opening: {{ elapsedTime | async }}ms </p> <button dt-button (click)="createToast()">Save</button> export class ToastDynamicMsgExample { message = ''; toastRef: DtToastRef | null = null; elapsedTime: Observable<number>; constructor(private _toast: DtToast) {} createToast(): void { this.toastRef = this._toast.create(this.message); if (this.toastRef) { this.elapsedTime = timer(0, TIMERINTERVAL).pipe( takeUntil(this.toastRef.afterDismissed()), map((count: number) => TIMERINTERVAL * count), ); } } } <dt-form-field> <dt-label>Message</dt-label> <input type="text" dtInput [(ngModel)]="message" placeholder="Your message" /> </dt-form-field> <p>Current message: {{ message }}</p> <p *ngIf="elapsedTime"> Time elapsed since opening: {{ elapsedTime | async }}ms </p> <button dt-button (click)="createToast()">Save</button> export class ToastDynamicMsgExample { message = ''; toastRef: DtToastRef | null = null; elapsedTime: Observable<number>; constructor(private _toast: DtToast) {} createToast(): void { this.toastRef = this._toast.create(this.message); if (this.toastRef) { this.elapsedTime = timer(0, TIMERINTERVAL).pipe( takeUntil(this.toastRef.afterDismissed()), map((count: number) => TIMERINTERVAL * count), ); } } }