Angular Toast - Resize and Relocate

To change the size of the Toast, specify the height and width properties.

HTML
TypeScript
  • <dx-toast
  • [(visible)]="isVisible"
  • type="error"
  • message="Connection problem"
  • [height]="55"
  • [width]="300">
  • </dx-toast>
  • <dx-button
  • text="Show the Toast"
  • (onClick)="isVisible = true">
  • </dx-button>
  • import { DxToastModule, DxButtonModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • isVisible: boolean = false;
  • }
  • @NgModule({
  • imports: [
  • DxButtonModule,
  • DxToastModule,
  • // ...
  • ],
  • // ...
  • })

If you need to position the Toast against a specific element on your page, set the position property.

HTML
TypeScript
  • <dx-toast
  • [(visible)]="isVisible"
  • type="error"
  • message="Connection problem">
  • <dxo-position
  • my="left"
  • at="left"
  • of="#targetElement">
  • </dxo-position>
  • </dx-toast>
  • <dx-button
  • text="Show the Toast"
  • (onClick)="isVisible = true">
  • </dx-button>
  • import { DxToastModule, DxButtonModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • isVisible: boolean = false;
  • }
  • @NgModule({
  • imports: [
  • DxButtonModule,
  • DxToastModule,
  • // ...
  • ],
  • // ...
  • })

This configuration of the position property reads as follows: "place my left side at the left side of the "#targetElement".

See Also