Customize the Content

The Toast widget provides four predefined appearances controlled by the type option. The type can be "info", "warning", "error" or "success", depending on the mood of the message that the Toast displays. You can specify this message using the message option.

jQuery
$(function() {
    $("#toastContainer").dxToast({
        type: "success", // or "info" | "warning" | "error"
        message: "Completed successfully!"
    });
});
Angular
HTML
TypeScript
<dx-toast
    message="Completed successfully!"
    type="success"> <!-- or "info" | "warning" | "error" -->
</dx-toast>
import { DxToastModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
     imports: [
         DxToastModule,
         // ...
     ],
     // ...
 })

If you need to define the Toast content completely, specify a template for it. You can simply put this template inside the Toast container...

jQuery
HTML
<div id="toastContainer">
    <p style="background-color:green">Toast content</p>
</div>
Angular
HTML
TypeScript
<dx-toast>
    <div *dxTemplate="let data of 'content'">
        <p style="background-color:green">Toast content</p>
    </div>
</dx-toast>
import { DxToastModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
     imports: [
         DxToastModule,
         // ...
     ],
     // ...
 })

... or you can combine the HTML markup for the template in the contentTemplate function. Note that this function will be called only once - when the Toast appears for the first time. This approach is more typical of jQuery.

JavaScript
$(function() {
    $("#toastContainer").dxToast({
        type: "custom",
        contentTemplate: function () {
            return $("<p />").text("Toast content")
                             .css("background-color", "green");
        }
    });
});
NOTE
To avoid rendering issues, always set the type option to "custom" when you use a custom template.

If you need to render different templates depending on a specific condition, define them inside the Toast container using the DevExtreme dxTemplate markup component. To switch the templates on-the-fly, change the value of the contentTemplate option.

jQuery
HTML
JavaScript
<div id="toastContainer">
    <div data-options="dxTemplate: { name: 'green' }">
        <p style="background-color:green">Green template</p>
    </div>
    <div data-options="dxTemplate: { name: 'blue' }">
        <p style="background-color:blue">Blue template</p>
    </div>
</div>
<div id="buttonContainer"></div>
$(function() {
    var toast = $("#toastContainer").dxToast({
        type: "custom",
        contentTemplate: 'green'
    }).dxToast("instance");

    $("#buttonContainer").dxButton({
        text: "Change the Toast Template", 
        onClick: function (e) {
            if (toast.option("contentTemplate") == "green") {
                toast.option("contentTemplate", "blue");
            } else {
                toast.option("contentTemplate", "green");
            }
            toast.show();
        } 
    });
});
Angular
HTML
TypeScript
<dx-toast
    type="custom"
    [(visible)]="isVisible"
    [contentTemplate]="contentTemplate">
    <div *dxTemplate="let data of 'green'">
        <p style="background-color:green">Green template</p>
    </div>
    <div *dxTemplate="let data of 'blue'">
        <p style="background-color:blue">Blue template</p>
    </div>
</dx-toast>
<dx-button
    text="Change the Toast Template"
    (onClick)="onClick($event)">
</dx-button>
import { DxToastModule, DxButtonModule } from 'devextreme-angular';
// ...
export class AppComponent {
    isVisible: boolean = false;
    contentTemplate: string = "green";
    onClick () {
        this.contentTemplate = this.contentTemplate == "green" ? "blue" : "green";
        this.isVisible = true;
    }
}
@NgModule({
     imports: [
         DxButtonModule,
         DxToastModule,
         // ...
     ],
     // ...
 })
See Also