Click event not working with dynamically generated Elements in Angular 5

Question

My question is how can we enable click event of dynamically generated HTML element using ElementRef.

HTML Code which is dynamically appended.

<ul class="list-group" style="border-radius: 4px;">
    <div class="file_list_event">
    <li class="list-group-item">        
        <button (click)="save_event_btn_app()" class="btn btn-sm btn-danger  delete_file_event pull-right" type="button">
        <i class="fa fa-close"></i> Delete</button>
        </div>
    </li>                   
</ul>

li is dynamically generated after service call. So, I'm not able to Generate the click event because it's a dynamically generated element.

So, for that I tried below code.

import { AfterViewInit, Component, ElementRef} from '@angular/core';

constructor(private elementRef:ElementRef) {}


  this.elementRef.nativeElement.querySelector('.delete_file_event')
                                .addEventListener('click', this.save_event_btn_app.bind(this)); 
 // Above code I have added just after the append code.

save_event_btn_app(event) {
  console.log(event);
}

But still I got the same error that,

ERROR TypeError: Cannot read property 'addEventListener' of null

Note:- I'm not sharing the dynamic html generation code because it's not necessary here.

Sajeetharan · Accepted Answer · 2018-05-26 13:53:56Z

3

You can handle this error by adding a check that el is not null before adding an event listener,

let el =  this.elementRef.nativeElement.querySelector('.delete_file_event');
if(el){
  el.addEventListener('click', this.save_event_btn_app.bind(this));
}

However to see why it is null , you need to add your dynamic generation code

answered May 26, 2018 at 13:53

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

5 Comments

Bhavin Over a year ago

It worked. Thank you brother for this very quick answer.

Bhavin Over a year ago

How can I add click event with parameter because it shows click but When I'm passing arguments its not getting value with argument.

Sajeetharan Over a year ago

what is the argument?

Bhavin Over a year ago

In Button click it's a argument with string save_event_btn_app('string'). Which is in Button from dynamically generate HTML.

Khurshid Ansari Over a year ago

@Bhavin : you store in property and used when function get fired.

Collectives™ on Stack Overflow

Click event not working with dynamically generated Elements in Angular 5

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related