Angular Toast Component

Toast

Push notifications to your visitors with an Angular toast, a lightweight and easily customizable alert message.

Available in Other JavaScript Frameworks

CoreUI Angular Toast Component is also available for Bootstrap, React, and Vue. Explore framework-specific implementations below:

On this page

Overview

Angular toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.

Things to know when using the toast plugin:

Toasts are opt-in for performance reasons, so you must initialize them yourself.
Toasts will automatically hide if you do not specify autohide: false.

Examples

Basic toast

To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.

Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.

import { Component } from '@angular/core';
import { ToastBodyComponent, ToastComponent, ToastHeaderComponent } from '@coreui/angular';
import { ToastSampleIconComponent } from './toast-sample-icon.component';

@Component({
  selector: 'docs-toast-example',
  templateUrl: './toast-example.component.html',
  imports: [ToastComponent, ToastHeaderComponent, ToastSampleIconComponent, ToastBodyComponent]
})
export class ToastExampleComponent {}

<c-toast [autohide]="false" [fade]="false" [visible]="true">
  <c-toast-header>
    <toast-sample-icon />
    CoreUI for Angular
  </c-toast-header>
  <c-toast-body>This is a static toast message</c-toast-body>
</c-toast>

import { Component } from '@angular/core';

@Component({
  selector: 'toast-sample-icon',
  template: `<svg
    class="rounded me-2"
    width="20"
    height="20"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
    focusable="false"
    role="img"
  >
    <rect width="100%" height="100%" fill="#007aff"></rect>
  </svg>`
})
export class ToastSampleIconComponent {}

import { Component, signal } from '@angular/core';
import {
  ButtonDirective,
  ProgressComponent,
  ToastBodyComponent,
  ToastComponent,
  ToasterComponent,
  ToastHeaderComponent
} from '@coreui/angular';
import { ToastSampleIconComponent } from './toast-sample-icon.component';

@Component({
  selector: 'docs-toast-example-2',
  templateUrl: './toast-example-2.component.html',
  imports: [
    ButtonDirective,
    ProgressComponent,
    ToasterComponent,
    ToastComponent,
    ToastHeaderComponent,
    ToastSampleIconComponent,
    ToastBodyComponent
  ]
})
export class ToastExample2Component {
  position = 'top-end';
  readonly visible = signal(false);
  readonly percentage = signal(0);

  toggleToast() {
    this.visible.update((value) => !value);
  }

  onVisibleChange($event: boolean) {
    this.visible.set($event);
    this.percentage.set(this.visible() ? this.percentage() : 0);
  }

  onTimerChange($event: number) {
    this.percentage.set($event * 25);
  }
}

<c-toaster [placement]="position" class="p-3" position="fixed">
  <c-toast
    (timer)="onTimerChange($event)"
    (visibleChange)="onVisibleChange($event)"
    [visible]="visible()"
  >
    <c-toast-header>
      <toast-sample-icon />
      CoreUI for Angular
    </c-toast-header>
    <c-toast-body>
      <p>This is static toast message in a toaster</p>
      <c-progress thin [value]="percentage()" />
    </c-toast-body>
  </c-toast>
</c-toaster>

<button (click)="toggleToast()" cButton class="m-1">Send a toast</button>

import { Component } from '@angular/core';

@Component({
  selector: 'toast-sample-icon',
  template: `<svg
    class="rounded me-2"
    width="20"
    height="20"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
    focusable="false"
    role="img"
  >
    <rect width="100%" height="100%" fill="#007aff"></rect>
  </svg>`
})
export class ToastSampleIconComponent {}

import { Component, viewChild } from '@angular/core';

import { ButtonDirective, ToasterComponent, ToasterPlacement } from '@coreui/angular';
import { AppToastSampleComponent } from './toast-sample.component';

@Component({
  selector: 'docs-toast',
  templateUrl: './toast.component.html',
  imports: [ToasterComponent, ButtonDirective]
})
export class ToastComponent {
  placement = ToasterPlacement.TopCenter;

  readonly toaster = viewChild(ToasterComponent);

  addToast() {
    const options = {
      title: `CoreUI for Angular Toast`,
      delay: 5000,
      placement: this.placement,
      color: 'info',
      autohide: true
    };
    const componentRef = this.toaster()?.addToast(AppToastSampleComponent, { ...options });
  }
}

<c-toaster class="p-3" position="fixed" [placement]="placement" />

<button (click)="addToast()" cButton class="m-1">
  Send a dynamic toast
</button>

<c-toast-content>
  <c-toast-header [closeButton]="closeButton()">
    <toast-sample-icon />
    <strong>{{ title() }}</strong>
  </c-toast-header>
  <c-toast-body #toast [cToastClose]="toast.toast ?? undefined">
    <p class="mb-1">This is a dynamic toast no {{ toast.toast?.index() }} {{ toast.toast?.clock }}</p>
    <ng-content />
    <c-progress thin [value]="25*(toast.toast?.clock ?? 1)" />
  </c-toast-body>
</c-toast-content>

import { Component, forwardRef, input } from '@angular/core';

import {
  ProgressComponent,
  ToastBodyComponent,
  ToastCloseDirective,
  ToastComponent,
  ToastContentComponent,
  ToastHeaderComponent
} from '@coreui/angular';
import { ToastSampleIconComponent } from './toast-sample-icon.component';

@Component({
  selector: 'app-toast-sample',
  templateUrl: './toast-sample.component.html',
  styles: [
    `
      :host {
        display: block;
        overflow: hidden;
      }
    `
  ],
  providers: [{ provide: ToastComponent, useExisting: forwardRef(() => AppToastSampleComponent) }],
  imports: [
    ToastHeaderComponent,
    ToastSampleIconComponent,
    ToastBodyComponent,
    ToastCloseDirective,
    ToastContentComponent,
    ProgressComponent
  ]
})
export class AppToastSampleComponent extends ToastComponent {
  constructor() {
    super();
  }

  readonly closeButton = input(true);
  readonly title = input('title');
}

import { Component } from '@angular/core';

@Component({
  selector: 'toast-sample-icon',
  template: `<svg
    class="rounded me-2"
    width="20"
    height="20"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
    focusable="false"
    role="img"
  >
    <rect width="100%" height="100%" fill="#007aff"></rect>
  </svg>`
})
export class ToastSampleIconComponent {}

Translucent

Toasts are slightly translucent to blend in with what’s below them.

import { Component } from '@angular/core';
import { ToastBodyComponent, ToastComponent, ToastHeaderComponent } from '@coreui/angular';
import { ToastSampleIconComponent } from './toast-sample-icon.component';

@Component({
  selector: 'docs-toast-translucent',
  templateUrl: './toast-translucent.component.html',
  imports: [ToastComponent, ToastHeaderComponent, ToastSampleIconComponent, ToastBodyComponent]
})
export class ToastTranslucentComponent {}

<c-toast [autohide]="false" [fade]="false" [visible]="true">
  <c-toast-header [closeButton]="false">
    <toast-sample-icon />
    CoreUI for Angular
    <small class="ms-auto">7 min ago</small>
  </c-toast-header>
  <c-toast-body>This is a toast message</c-toast-body>
</c-toast>

import { Component } from '@angular/core';

@Component({
  selector: 'toast-sample-icon',
  template: `<svg
    class="rounded me-2"
    width="20"
    height="20"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
    focusable="false"
    role="img"
  >
    <rect width="100%" height="100%" fill="#007aff"></rect>
  </svg>`
})
export class ToastSampleIconComponent {}

Stacking

You can stack toasts by wrapping them in a c-toaster container, which will vertically add some spacing.

import { Component } from '@angular/core';
import { ToastBodyComponent, ToastComponent, ToasterComponent, ToastHeaderComponent } from '@coreui/angular';
import { ToastSampleIconComponent } from './toast-sample-icon.component';

@Component({
  selector: 'docs-toast-stacking',
  templateUrl: './toast-stacking.component.html',
  imports: [ToasterComponent, ToastComponent, ToastHeaderComponent, ToastSampleIconComponent, ToastBodyComponent]
})
export class ToastStackingComponent {}

<c-toaster position="static">
  <c-toast [autohide]="false" [fade]="false" [visible]="true">
    <c-toast-header [closeButton]="false">
      <toast-sample-icon />
      CoreUI for Angular
      <small class="ms-auto">7 min ago</small>
    </c-toast-header>
    <c-toast-body>This is a toast message</c-toast-body>
  </c-toast>

  <c-toast [autohide]="false" [fade]="false" visible>
    <c-toast-header [closeButton]="false">
      <toast-sample-icon />
      CoreUI for Angular
      <small class="ms-auto">5 min ago</small>
    </c-toast-header>
    <c-toast-body>This is a toast message</c-toast-body>
  </c-toast>
</c-toaster>

import { Component } from '@angular/core';

@Component({
  selector: 'toast-sample-icon',
  template: `<svg
    class="rounded me-2"
    width="20"
    height="20"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
    focusable="false"
    role="img"
  >
    <rect width="100%" height="100%" fill="#007aff"></rect>
  </svg>`
})
export class ToastSampleIconComponent {}

Custom content

Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup. Here we’ve created a simpler toast by removing the default c-toast-header, adding a cButtonClose, and using some flexbox utilities to adjust the layout.

import { Component } from '@angular/core';
import { ButtonCloseDirective, ToastBodyComponent, ToastComponent } from '@coreui/angular';

@Component({
  selector: 'docs-toast-custom-content',
  templateUrl: './toast-custom-content.component.html',
  imports: [ToastComponent, ToastBodyComponent, ButtonCloseDirective]
})
export class ToastCustomContentComponent {}

<c-toast #toast="cToast" [autohide]="false" [visible]="true" class="align-items-center">
  <div class="d-flex">
    <c-toast-body>
      <span>Hello, world! This is a toast message.</span>
    </c-toast-body>
    <button aria-label="close" cButtonClose class="me-2 m-auto" (click)="toast.visible=false"></button>
  </div>
</c-toast>

Alternatively, you can also add additional controls and components to toasts.

import { Component } from '@angular/core';
import {
  ButtonDirective,
  ToastBodyComponent,
  ToastCloseDirective,
  ToastComponent,
  ToasterComponent
} from '@coreui/angular';

@Component({
  selector: 'docs-toast-custom-content-2',
  templateUrl: './toast-custom-content-2.component.html',
  imports: [ToasterComponent, ToastComponent, ToastBodyComponent, ButtonDirective, ToastCloseDirective]
})
export class ToastCustomContent2Component {}

<c-toaster position="static">
  <c-toast #toast [autohide]="false" [visible]="true">
    <c-toast-body>
      Hello, world! This is a toast message.
      <div class="mt-2 pt-2 border-top">
        <button cButton color="primary" size="sm">
          Take action
        </button>
        <button [cToastClose]="toast" cButton class="ms-1" color="secondary" size="sm">
          Close
        </button>
      </div>
    </c-toast-body>
  </c-toast>
</c-toaster>

Color schemes

Building on the above example, you can create different toast color schemes with our color and background utilities. Here we’ve set color="primary" and added .text-white class to the c-toast, and then set white property to our close button. For a crisp edge, we remove the default border with .border-0.

import { Component } from '@angular/core';
import { ButtonCloseDirective, ToastBodyComponent, ToastComponent } from '@coreui/angular';

@Component({
  selector: 'docs-toast-color-schemes',
  templateUrl: './toast-color-schemes.component.html',
  imports: [ToastComponent, ToastBodyComponent, ButtonCloseDirective]
})
export class ToastColorSchemesComponent {}

<c-toast #toast="cToast" [autohide]="false" [visible]="true" class="align-items-center text-white border-0" color="primary">
  <div class="d-flex">
    <c-toast-body>
      <span>Hello, world! This is a toast message.</span>
    </c-toast-body>
    <button aria-label="close" cButtonClose white class="me-2 m-auto" (click)="toast.visible=false"></button>
  </div>
</c-toast>

Placement

Place toasts where need them to show. The top right or top middle is often used for notifications.

import { Component } from '@angular/core';
import { ToastBodyComponent, ToastComponent, ToasterComponent, ToastHeaderComponent } from '@coreui/angular';
import { ToastSampleIconComponent } from './toast-sample-icon.component';

@Component({
  selector: 'docs-toast-placement',
  templateUrl: './toast-placement.component.html',
  styles: [
    `
      :host {
        min-height: 240px;
        min-width: fit-content;
        position: relative;
      }
    `
  ],
  imports: [ToasterComponent, ToastComponent, ToastHeaderComponent, ToastSampleIconComponent, ToastBodyComponent]
})
export class ToastPlacementComponent {}

<div class="position-relative">
  <c-toaster placement="top-end" position="absolute">
    <c-toast [autohide]="false" visible>
      <c-toast-header>
        <toast-sample-icon />
        <strong class="me-auto">CoreUI for Angular</strong>
        <small class="text-muted">Just now</small>
      </c-toast-header>
      <c-toast-body>See? Just like this.</c-toast-body>
    </c-toast>

    <c-toast [autohide]="false" visible>
      <c-toast-header>
        <toast-sample-icon />
        <strong class="me-auto">CoreUI for Angular</strong>
        <small class="text-muted">2 secs ago</small>
      </c-toast-header>
      <c-toast-body>Heads up, toasts will stack automatically</c-toast-body>
    </c-toast>
  </c-toaster>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'toast-sample-icon',
  template: `<svg
    class="rounded me-2"
    width="20"
    height="20"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="xMidYMid slice"
    focusable="false"
    role="img"
  >
    <rect width="100%" height="100%" fill="#007aff"></rect>
  </svg>`
})
export class ToastSampleIconComponent {}

API reference

Toast Module

import { ToastModule } from '@coreui/angular';

@NgModule({
    imports: [ToastModule,]
})
export class AppModule() { }

c-toast

component

exportAs: cToast

jsx

import { ToastComponent } from '@coreui/angular'

Props

Property	Default	Type
autohide	`true`	`boolean`
Auto hide the toast.
color	`''`	`string`
Sets the color context of the component to one of CoreUI’s themed colors.
delay	`5000`	`number`
Delay hiding the toast (ms).
dynamic	-	`boolean`
Marks the toast as dynamically created by `ToasterService`, rather than declared in the template.
fade	`true`	`boolean`
Apply fade transition to the toast.
placement	`undefined`	`string`
Placement of the toast within its toaster, set by `ToasterComponent`.
role	`'alert'`	`string`
ARIA role attribute.
visible	`false`	`boolean`
Toggle the visibility of component.

Events

Event name
timer
Event emitted on timer tick `$event` `number`
visibleChange
Event emitted on visibility change `$event` `boolean`

c-toast-body

component

exportAs: cToastBody

jsx

import { ToastBodyComponent } from '@coreui/angular'

c-toast-content

component

jsx

import { ToastContentComponent } from '@coreui/angular'

component

exportAs: cToastHeader

jsx

import { ToastHeaderComponent } from '@coreui/angular'

Property	Default	Type
closeButton	`true`	`boolean`
Add close button to a toast header

c-toaster

component

exportAs: cToaster

jsx

import { ToasterComponent } from '@coreui/angular'

Property	Default	Type
placement	`ToasterPlacement.TopEnd`	`string`
Toaster placement
position	`'absolute'`	`string`
Toaster position

cToastClose

directive

exportAs: cToastClose

jsx

import { ToastCloseDirective } from '@coreui/angular'

Property	Default	Type
cToastClose	-	`ToastComponent`
Toast to close.