Bootstrap Modal popup component not working on click of angular formly element

Question

I have a reuquirement in which i am using a multiselect of angular formly which also has logo for each row. On click of this logo i want to load modal popup component, i am following a Stackblitz Demo for calling modal-component in app.component on click of element.

The link of demo which i followed : Bootstrap modal Stackblitz Demo

My workaround demo which i am implenenting is as follows : Workaround Demo Stackblitz

The error which i am getting on click of logo with the function openModal() is of undefined object.

How to i rectify this while working with angular formly?

Following is the snippet of the code:

multiselect formly component

@Component({
selector: 'formly-field-multiselect',
template: `<br><p-multiSelect  [options]="to.options"
  [formControl]="formControl"
  [formlyAttributes]="field"
  [showClear]="!to.required" >
  <ng-template let-item pTemplate="item">
  <div>{{item.label}}</div>
   <div>
   <i class="pi pi-check" (click)="to.openModal()"></i>
   </div>
  </ng-template>
</p-multiSelect>
`,
})

app.component.ts in which modal component(calenderComponent) is called

fields: FormlyFieldConfig[] = [
{
  key: "select",
  type: "multiselect",
  templateOptions: {
    multiple: false,
    placeholder: "Select Option",
    options: [
      { label: "Select City", value: null },
      { label: "New York", value: { id: 1, name: "New York", code: "NY" } },
      { label: "Rome", value: { id: 2, name: "Rome", code: "RM" } },
      { label: "London", value: { id: 3, name: "London", code: "LDN" } },
      {
        label: "Istanbul",
        value: { id: 4, name: "Istanbul", code: "IST" }
      },
      { label: "Paris", value: { id: 5, name: "Paris", code: "PRS" } }
    ],
      openModal() {
         this.modalRef = this.modalService.show(CalenderComponent,  {
         initialState: {
         title: 'Modal title'
       }
  });
 }, 
 }
}

I click on icon of the multiselect row which is in and then i get the error, — Shashank S Chandel, Dec 23 '20 at 05:06

score 1 · Accepted Answer · answered Dec 23 '20 at 05:31

1

If you debug this, you can see that this in the context of your function (openModal), is the field you defined in the fields object, which doesnt have the modalService service you injected to the component, to overcome this, you can use a lambda expression:

  openModal: () => {
    this.modalRef = this.modalService.show(CalenderComponent, {
      initialState: {
        title: "Modal title"
      }
    });
  }

this keeps the closure as you wanted, you can read more about it here

After you solve that problem, you will face another one:

To overcome this, you need to add the CalenderComponent as an entrycomponent in your app module file (app.module.ts):

entryComponents: [CalenderComponent]

Here is a forked working stackblitz

answered Dec 23 '20 at 05:31

Moshezauros

2,493
1
11
15

Described in best way, thanks for the support and the solution provided, i got the concept of using closure and the use of entryComponents. Please upVote the question for better reach. Cheers! – Shashank S Chandel Dec 23 '20 at 05:57
Moshezauros could you help me in one of the requirement : last comment of the answer : https://stackoverflow.com/questions/65284562/disable-dropdown-close-of-multiselect-on-click-of-a-field-inside-multiselect-dro/65298879#65298879 – Shashank S Chandel Dec 28 '20 at 13:31

Bootstrap Modal popup component not working on click of angular formly element

1 Answers1