0

I am working on angular2 application.

I am getting one issue when I am appending date field from typescript the field was generated and looking perfect but the functionality I have performed on field click was not working(date picker will open on click on field and event icon).

HTML 

<div id="specific_dates_container" class="field_area">
</div>

TYPESCRIPT

let count = document.querySelectorAll('.specific-date').length;
count += 1;
this.addCouponForm.addControl('specific_date'+count, new FormControl());

let html = "<div class='specific-date' id='specific_date"+count+"'><input placeholder='MM/DD/YYYY'  ngx-mydatepicker [options]='calendarOptions' #sd"+count+"='ngx-mydatepicker' formControlName = 'specific_date"+count+"' (click)='sd"+count+".toggleCalendar()' readonly><i class='material-icons' (click)='sd"+count+".toggleCalendar()'>event</i></div><br>";

$("#specific_dates_container").append(html);
Lakhvir Singh
  • 664
  • 4
  • 15
  • 35
  • 1
    Generally, you should avoid working with DOM using Angular especially with jQuery. Maybe try using `*ngIf` directive to conditionally append or hide some fields – Vuk Stanković Jul 13 '17 at 09:36

1 Answers1

0

You need to change your approach towards this

It seems you are tying to create controls dynamically To do that you need to follow this link

How to dynamically add and remove form fields in Angular 2

umar
  • 910
  • 10
  • 24
  • I am not getting any issue with form fields they are working properly but the functionality I have implemented on HTML tags is not working. Ex : Click function. – Lakhvir Singh Jul 13 '17 at 10:50
  • Yes It will not work as Angular creates it's own virtual dome and binds its own events wile initializing components.. For example if using Jquery you try to add some element in dom with directive property binding then it will not work as Angular virtual dom does not know about that Because this binding happens on compile time not on runtime – umar Jul 13 '17 at 10:56
  • Can you please suggest me any source from where I will understand what you are saying. – Lakhvir Singh Jul 13 '17 at 12:50
  • Your question is possible duplicate of following https://stackoverflow.com/questions/41231521/manipulating-dom-in-angular-2 – umar Jul 14 '17 at 05:12
  • This might help you understanding why I am saying this. Though it talks about ng 1. But good thing is to use best practices https://stackoverflow.com/questions/30007792/should-we-use-jquery-with-angularjs – umar Jul 14 '17 at 05:13