Angular 5：动态事件绑定

Question

How to add dynamic event listener to dynamic element ie after its rendering is done using service response? I need to add dynamic event listener to particular element using some selector like element id.

Use Case : Suppose I have two elements both rendering using *ngFor over JSON from service response say:

First Elem Second Elem

Now, first element JSON contains few instructions using which I need to make a dynamic function and I need to bind this newly created function to my second div. I need to do this using Angular 5 and not vanilla script

Let me explain in three simple step, what I need to do :

1) Make Dynamic function using json ( may be multiple function needs to be create for different different elements ) 2) Finding my element which needs to bind ( optional ) 3) Add dynamic function to corresponding elements using some event listener

Answer 1

We can use event binding to capture a variety of user-initiated events to initiate logic in our component class.

<!-- From: -->
<input type="submit" class="btn" value="{{ btnText }}">

<!-- To: -->
<input type="submit" class="btn" value="{{ btnText }}" (click)="addItem()">