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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.