ngx-toastr Bootstrap 5

readme.md

This is a basic example of using ngx-toastr with Bootstrap 5.

I personally don't use toastr built in context appear styling (e.g. success, danger...) so I have removed those styles. Bootstrap 5 has built in toast control however it doesn't do the positioning without appling extra styles so I left the positioning classes.

If a title is not provided, there's no heading div or extra buttons. In this way you can use it like this example.

In my code base I have a BootstrapContextEnum enum that holds string equivalent of the Bootstrap contexts. This is totally optional and can be reduced to a string.

bootstrap.toast.ts

import { Component } from '@angular/core';
import { GlobalConfig, Toast, ToastPackage, ToastrService } from 'ngx-toastr';
import { BootstrapContextEnum } from '../../models/bootstrap-context-enum';

@Component({
  selector: '[bootstrap-toast-component]',
  template: `
    <div
      class="toast {{ containerClass }} show"
      role="alert"
      [style.display]="state.value === 'inactive' ? 'none' : ''"
    >
      <div class="toast-header" *ngIf="title">
        {{ title }}
        <button
          type="button"
          class="btn-close"
          aria-label="Close"
          *ngIf="options.closeButton"
          (click)="remove()"
        ></button>
      </div>
      <div class="d-flex" *ngIf="!title">
        <div class="toast-body">
          {{ message }}
        </div>
        <button
          type="button"
          class="btn-close btn-close-white me-2 m-auto"
          data-bs-dismiss="toast"
          aria-label="Close"
          *ngIf="options.closeButton"
          (click)="remove()"
        ></button>
      </div>
      <div class="toast-body" *ngIf="title">
        {{ message }}
        <div class="mt-2 pt-2 border-top" *ngIf="options.buttons.length !== 0">
          <button
            *ngFor="let btn of options.buttons"
            type="button"
            class="{{ btn.style }}"
            (click)="handleClick($event, btn.id)"
          >
            {{ btn.text }}
          </button>
        </div>
      </div>
    </div>
  `,
  preserveWhitespaces: false,
})
export class BootstrapToast extends Toast {
  options: BootstrapToastConfig;
  containerClass = '';

  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage
  ) {
    super(toastrService, toastPackage);
    if (this.options.context) {
      this.toastClasses = ``;
      this.containerClass = `toast align-items-center text-white bg-${this.options.context} border-0`;
    }
  }

  handleClick(event: Event, id: string) {
    event.stopPropagation();
    this.toastPackage.triggerAction(id);
    return false;
  }
}

export interface BootstrapToastConfig extends GlobalConfig {
  context: BootstrapContextEnum;
  buttons: {
    style: string;
    text: string;
    id: string;
  }[];
}

toastr-bs5-alert.scss

// Position
.toast-center-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-left {
  top: 12px;
  left: 12px;
}
.toast-top-right {
  top: 12px;
  right: 12px;
}
.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}
.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

// Toast
.toast-container {
  pointer-events: none;
  position: fixed;
  z-index: 999999;
}

usage.ts

import { BootstrapToast, BootstrapToastConfig } from './bootstrap.toast';
import { ToastrService } from 'ngx-toastr';

constructor(
    private readonly toastr: ToastrService
  ) {}

private readonly toastrDefaults = {
    timeOut: 5000,
    closeButton: true,
    enableHtml: true,
    tapToDismiss: false,
    titleClass: '',
    positionClass: 'toast-bottom-right',
    context: undefined,
    extendedTimeOut: 0
  } as BootstrapToastConfig;


const config = Object.assign({}, this.toastrDefaults);
    config.timeOut = wait * 1000;
    config.toastComponent = BootstrapToast;
    config.context = style;
    config.buttons = [
      {
        id: 'foo',
        style:'btn-primary',
        text: 'BUTTON!'
      }
    ];
    const t = this.toastr.show(message, 'title', config);
    t.onAction.subscribe((action) => console.log(action)); //logs "foo" on clicking BUTTON