How on Angular Universal I can do modal or toast of Bootstrap or Material, Materialize

Question

How to use modals in Angular Universal? Toasts, dropdowns - all stuff that works with DOM and us library js?

I have the problem with implementing code

import { Toast } from '../../../../../node_modules/bootstrap/dist/js/bootstrap.min.js'
import {DOCUMENT, isPlatformBrowser} from "@angular/common";
  
export class ToastComponent implements OnInit, AfterViewInit {
  @ViewChild('toast') toast: ElementRef<HTMLDivElement>

  constructor(@Inject(PLATFORM_ID) private platformId: Object,
              @Inject(DOCUMENT) private _doc: Document) {

    if (isPlatformBrowser(this.platformId)) {

      console.log('getWindow', this.getWindow())
      console.log('this.getWindow().document', this.getWindow().document)
      
      // var toastElList = [].slice.call(document.querySelectorAll('.toast'))
      // var toastList = toastElList.map(function (toastEl) {
        return new bootstrap.Toast(this.toast, {}) //error in this 1 variant
      // })


      // Array.from([this.toast])
        // .forEach(toastNode => new Toast(toastNode))

      return new Toast(this.toast); //error in this 2 variant


    }
  }


  getWindow(): Window | null {
    return this._doc.defaultView;
  }

}

Do you need to render your page server side with a modal already open? — David, Jun 14 '21 at 07:43
So what's your problem exactly? If you wrap your code like you did with `isPlatformBrowser` checks, it should work. You can also have a look at angular bootstrap lib, such as ng-bootstrap (https://ng-bootstrap.github.io/) — David, Jun 14 '21 at 07:52
Unfortunately isPlatformBrowser didn't work for me. Now I will try another method. — Tatyana Molchanova, Jun 14 '21 at 07:57
Please, see this: https://stackoverflow.com/questions/67932321/angular-11-universal-and-bootstrap-5-toast-not-working-new-bootstrap-ts2304-ca/67966672#67966672 — Tatyana Molchanova, Jun 14 '21 at 07:57

score 0 · Answer 1 · answered Jun 14 '21 at 10:59

Any variants of installing and working with Bootstrap (latest, @types) didn't work for me.

I installed Angular Material and use it SnackBar and it works fine.

https://material.angular.io/components/snack-bar/examples

I delete Bootstrap from Angular Universal as a nightmare. 3 days spent for nothing.

How on Angular Universal I can do modal or toast of Bootstrap or Material, Materialize

1 Answers1