CODEWITHSUNDEEP
angularbootstrap-modaljquery-select2
Amin
Amin

Reputation: 153

Select2 plugin in ngx-smart-modal doesn't work

I'm using select2 plugin for my selects in an angular project. When I add my dropdown component in the form or in bootstrap modal, everything work as expected. But I decided to use ngx-smart-modal and when I add the same component in this modal, it does not work. Actually it looks that it removes the span tag of select2.

here the link stackblitz

Upvotes: 0

Views: 293

Answers (1)

Maxime
Maxime

Reputation: 2234

The issue don't come from the library but from the component code itself:

onModalOpen() {
    setTimeout(() => {
      $('.js-example-inside').select2({
        placeholder: "inside modal"
      });
    });
  }

You need to trigger (with setTimeout in my example) a new Angular check cycle (lifecycle hooks) to wait for the modal content to be displayed and available in the DOM. The element you try to target with select2(...) wasn't yet available, that's why it wasn't working.

So the fixed code looks like:

  onModalOpen() {
    setTimeout(() => {
      $('.js-example-inside').select2({
        placeholder: "inside modal"
      });
    });
  }

Here's the fixed stackblitz.

Upvotes: 1

Related Questions