Toast / Notification

Toast Types

<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

<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.

<!-- Default config is set via provider -->

Position

@for (pos of positions; track pos) {
  <button mat-stroked-button (click)="showAtPosition(pos)">{{ pos }}</button>
}