How to append html from typescript file and perform functionality on it in angular2

Question

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);

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ć
– Vuk Stanković, Commented Jul 13, 2017 at 9:36

umar · Accepted Answer · 2017-07-13 10:13:17Z

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

answered Jul 13, 2017 at 10:13

umar

91010 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lakhvir Singh Over a year ago

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.

umar Over a year ago

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

Lakhvir Singh Over a year ago

Can you please suggest me any source from where I will understand what you are saying.

umar Over a year ago

Your question is possible duplicate of following stackoverflow.com/questions/41231521/…

umar Over a year ago

This might help you understanding why I am saying this. Though it talks about ng 1. But good thing is to use best practices stackoverflow.com/questions/30007792/…

Collectives™ on Stack Overflow

How to append html from typescript file and perform functionality on it in angular2

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related