Toast / Notification
Toast Types
HTML
TS
<button mat-raised-button color="primary" (click)="showSuccess()">Success</button>
<button mat-raised-button color="warn" (click)="showError()">Error</button>
<button mat-raised-button (click)="showInfo()">Info</button>
<button mat-raised-button (click)="showWarning()">Warning</button>Custom Duration
HTML
TS
<mat-form-field>
<mat-label>Message</mat-label>
<input matInput [(ngModel)]="message" />
</mat-form-field>
<mat-form-field>
<mat-label>Duration (ms)</mat-label>
<input matInput type="number" [(ngModel)]="duration" />
</mat-form-field>
<button mat-raised-button (click)="showCustom()">Show Custom</button>Default Configuration
Override global toast defaults via the RUI_TOAST_DEFAULT_OPTIONS injection token in your app config.
HTML
TS
<!-- Default config is set via provider -->Position
HTML
TS
@for (pos of positions; track pos) {
<button mat-stroked-button (click)="showAtPosition(pos)">{{ pos }}</button>
}