[Fixed] Properly handle the new "Bootstrap Toast" feature in Angular 7+?


I am trying to use Bootstrap 4.2 Toast with an Angular 7 application. I’m unable to translate Jquery sample provided by the Bootstrap documentation in Angular.

Currently, I use Jquery inside my HTML template that call $('.toast').toast('show') to show up all DOM toasts when my component is ready, but I’m sure that’s the wrong way.
I would like to show up the toasts notifications on ngOnInit(), or another function I can call in a .component.ts.

For example, I want to show one toast notification.

1 – Current method



<div class="toast" id="toast" ...></div>



<!-- Little hack to initialize Toast (according to the documentation) -->

2 – Desired method



<div class="toast" id="toast" ...></div>



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

  templateUrl: './toast.component.html'
export class ToastComponent implements OnInit {

  ngOnInit() {
    // Here is a good way to show a toast notification right here ?


Here is a stackblitz that show this current behaviour.

I know that’s a recent feature, but if someone find a good way to handle Bootstrap Toasts, that’d be really appreciate 🙂


Finally, I’ve used Toast module from ng-bootstrap library to accomplish this purpose :

<ngb-toast header="Notification header">
  Content of the notification

Leave a Reply

(*) Required, Your email will not be published