Toast

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

Only one toast message can be displayed at a time. They automatically time out and disappear from the screen. It is crucial to show short to the point messages that can be perceived easily. Therefore, toasts only support messages up to 120 characters.

Toasts can not contain any actions or icons. They are not clickable.

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

Behavior

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

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 DynamicMsgToastExampleComponent { 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)); } } } Message

Current message: {{message}}

Time elapsed since opening: {{elapsedTime | async}}ms

export class DynamicMsgToastExampleComponent { message = ''; toastRef: DtToastRef | null = null; elapsedTime: Observable; 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)); } } }

Toast

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

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 current open toast. Can be used if a toast needs to be dismissed before the calculated time passes.

Examples

´ 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 DynamicMsgToastExampleComponent { 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)); } } } Message

Current message: {{message}}

Time elapsed since opening: {{elapsedTime | async}}ms

export class DynamicMsgToastExampleComponent { message = ''; toastRef: DtToastRef | null = null; elapsedTime: Observable; 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)); } } }