GitHub

DaffToastService

import { DaffToastService } from '@daffodil/design/toast'

Service to display toasts.

@Injectable()
class DaffToastService implements OnDestroy {
  open(
    toast: DaffToastData
    configuration?: Partial<DaffToastConfiguration>
  ): DaffToast
  close(toast: DaffToast): void
}

() Methods

open
DaffToast

Opens the toast.

Parameters
Parametertoast: DaffToastData
Description

Data that can be shown on a toast.

Parameterconfiguration: Partial<DaffToastConfiguration>
Description

Additional configuration options such as duration. The default duration is set to 5000ms.

close
void

Closes the toast.

Parameters
Parametertoast: DaffToast
Description

The instance of toast that you wish to close.

Examples

import {
  ChangeDetectionStrategy,
  Component,
  EventEmitter,
  OnInit,
} from '@angular/core';

import {
  DaffToast,
  DaffToastAction,
  DaffToastService,
} from '@daffodil/design/toast';

@Component({
  selector: 'default-toast',
  templateUrl: './default-toast.component.html',
  styles: [],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DefaultToastComponent implements OnInit {
  private toast: DaffToast;

  constructor(private toastService: DaffToastService) {}

  closeToast = new EventEmitter<DaffToastAction>();

  open() {
    this.toast = this.toastService.open({
      title: 'Update Available',
      message: 'A new version of this page is available.',
      actions: [
        { content: 'Remind me later', type: 'flat', size: 'sm', eventEmitter: this.closeToast },
      ],
    });
  }

  ngOnInit() {
    this.closeToast.subscribe(() => {
      this.toastService.close(this.toast);
    });
  }
}