0

I am using fullcalendar as angular component and in that I have added a checkbox in listview. But I want to render that checkbox as a mat-checkbox. So is is possible to render this from function? This is how I am using, but it is not rendering checkbox.

eventRender(event) {
    const eventView = event.view.type;
    const eventID = event.event.id;
    console.log(event);
    if (eventView === 'listWeek') {
      const newCell = event.el.insertCell(3);
      newCell.innerHTML = `<mat-checkbox appearance="outline">Completed</mat-checkbox>`;
  }
}

so Basically I want to a checkbox in list view, where user can click on that checkbox to mark that task as a completed. So that checkbox also need to call a function. Any idea how can I do that?

C Modi
  • 19
  • 8
  • Use dynamic component approach from angular https://angular.io/guide/dynamic-component-loader – Shashank Dec 10 '19 at 08:15
  • It will be possible to do, but never really clean or how it supposed to be. There are much cleaner options with reactive approach if you want to know. – Ling Vu Dec 10 '19 at 08:29
  • @LingVu ya sure, can you show some example how to achieve this? – C Modi Dec 10 '19 at 09:41
  • https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/ – Ling Vu Dec 10 '19 at 09:42
  • https://stackoverflow.com/a/37044960/7943457 check this – Piyush Dec 10 '19 at 10:16
  • @LingVu I don't think your approach will possible, as I can not assign loop or any other angular detective, this need to achieve directly from javascript. I think my question is not much clear what I want to achieve. i have updated my question. – C Modi Dec 10 '19 at 10:42
  • You can loop through a set of data to dynamically create new `mat-checkbox`es. That's the whole point of the reactive form, to move all logic into TS – Ling Vu Dec 10 '19 at 10:45

0 Answers0