CODEWITHSUNDEEP
javascriptangularbootstrap-4angular7bootstrap-toast
Xavier Brassoud
Xavier Brassoud

Reputation: 717

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

toast.component.html

[...]

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

[...]

index.html

[...]
<!-- Little hack to initialize Toast (according to the documentation) -->
<script>
$(document).ready(function(){
    $('#toast').toast('show');
});
</script>
[...]

2 - Desired method

toast.component.html

[...]

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

[...]

toast.component.ts

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

@Component({
  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 :)

Upvotes: 1

Views: 3470

Answers (1)

Xavier Brassoud
Xavier Brassoud

Reputation: 717

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

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

Upvotes: 0

Related Questions