reg. Dynamic 2 way binding

[Anup Deval]

Hello

I have added the datepicker control dynamically from compoent.ts file as shown below--

const container: HTMLElement = createElement('div', { className: 'custom-field-container' });

      const inputEle: HTMLInputElement = createElement('input', {

          className: 'e-field', attrs: { name: 'dtStartDate' }

      }) as HTMLInputElement;

      container.appendChild(inputEle);

      const datePicker: DatePicker = new DatePicker({

        enabled: true,

        allowEdit : true,

        isMultiSelection: false,

        format: 'dd/MM/yyyy',

        placeholder: 'Start Date',

        showClearButton: false,

        showTodayButton: true,

        value:this.selectedDate,

        openOnFocus:true,

        firstDayOfWeek:1

    });

      datePicker.appendTo(inputEle);

      container.appendChild(inputEle);

I could see the dynamically added control on the UI.

Question is how do I bind my date value variable to this control? same time, how can I access the changed value in my code variable?

Thanks

Anup

[Sevvandhi Nagulan]

Hi Anup, 

Greetings from Syncfusion support. 

We checked your query of  “how do I bind my date value variable to this control? same time, how can I access the changed value in my code variable?”. We prepared the sample based on the requested and attached it below for your reference.  You can get the changed value in the change event. Kindly refer the following code. 

  onClick(args)  { 

    const container: HTMLElement = createElement('div', { className: 'custom-field-container' }); 

      const inputEle: HTMLInputElement = createElement('input', { 

          className: 'e-field', attrs: { name: 'dtStartDate' } 

      }) as HTMLInputElement; 

      container.appendChild(inputEle); 

      document.body.appendChild(container); 

      const datePicker: DatePicker = new DatePicker({ 

        enabled: true, 

        allowEdit : true, 

        isMultiSelection: false, 

        format: 'dd/MM/yyyy', 

        placeholder: 'Start Date', 

        showClearButton: false, 

        showTodayButton: true, 

        value:this.selectedDate, 

        openOnFocus:true, 

        firstDayOfWeek:1, 

        change: function(args){ 

          console.log(args.value); 

        } 

    }); 

      datePicker.appendTo(inputEle); 

 } 

Kindly refer the below sample. 

Sample link: https://stackblitz.com/edit/angular-fyncov-ag5atj?file=app.component.ts 

Kindly get back to us for further assistance. 

Regards, 

Sevvandhi N