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.
<button dt-button (click)="createToast()">Save</button>
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 dependency injection (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
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.
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.
<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>
Dismiss toast
dismiss(): void
Dismisses the currently displayed toast. Can be used if a toast needs to be dismissed before the calculated time passes.
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 minumum display time is 2000ms to guarantee that the message can be perceived by the user.