How to Bind a component on click of element in multiselect of angular formly Reactive forms

Question

I have a reuquirement in which i am using a multiselect dropdwon which also has logo for each row. On click of this logo i want to load other component, like we use viewchild in template driven approach is it possible to use it in Reactive formly form component?

Step 1: Open multiselect of formly element.

Step 2: There is a logo in each row, on click of logo a method is called and need to load calender component in popup.

Step 3: Load contents of calendar-component.html in modal popup.

Stackblitz workaround of example for demonstration: Click here

Screenshot for logo in multiselect:

Answer 1

you can create a function to verify if it model is selected:

 isSelected() {
   return this.model.hasOwnProperty('select') && this.model['select'].length;
  }

and at your template you can call your calendar on that condition:

Entered Values
<div> {{model|json}}</div>
<calender *ngIf="isSelected()"></calender>

formly approach

as formly states you can also provide at your template as output modelChange to trigger actions on model updates. this way your formy tag would look like:

  <formly-form [model]="model" [fields]="fields"
    (modelChange)="displayCalender()"
  >

and you define displayCalender funcionality at your component:

 displayCalender() {
   // logic to render your calender 
  }

https://stackblitz.com/edit/ngx-formly-ui-primeng-jxpyap?file=app/app.component.ts