Adding event listener to dynamic element in Angular 4?

Question

I have some description text from an API that I am inserting as HTML into the DOM.

<div class="activity-description" [innerHTML]="description"></div>

The description is set within ngOninit();

if (this.eventDetail.description.length > 255) {
   this.description = this.eventDetail.description.substring(0, 255) + '<span class="more-description"> ...Learn More</span>';
}

I am trying to add an event listener to the "more-description" class within the ngAfterViewInit()

var el = this.elementRef.nativeElement.querySelector('.more-description');
    if (el)
        el.addEventListener('click', this.displayFullDescription());

The element is null and does not allow the event listener to be attached. How do I add this event listener to html elements that are dynamically added?

Try to run cdRef.detectChanges() before traversing

yurzui
– yurzui

2017-05-16 20:11:49 +00:00
Commented May 16, 2017 at 20:11 — yurzui
– yurzui, Commented May 16, 2017 at 20:11
Where would I run the function?

David Aguirre
– David Aguirre

2017-05-16 20:17:36 +00:00
Commented May 16, 2017 at 20:17 — David Aguirre
– David Aguirre, Commented May 16, 2017 at 20:17

Exil · Accepted Answer · 2018-08-03 14:57:37Z

11

You can manually render view by calling cdRef.detectChanges:

constuctor(private cdRef: ChangeDetectorRef) {}

ngOnInit() {
  if (this.eventDetail.description.length > 255) {
    this.description = this.eventDetail.description.substring(0, 255) +
                      '<span class="more-description"> ...Learn More</span>';
  }
}

ngAfterViewInit() {
  this.cdRef.detectChanges();
  var el = this.elementRef.nativeElement.querySelector('.more-description');
}

Update

Perhaps you made some mistake in this code:

el.addEventListener('click', this.displayFullDescription());

I don't know what displayFullDescription function does.

Here is working example:

@Component({
  selector: 'event',
  template: `
    <div class="activity-description" [innerHTML]="description"></div>
  `,
})
export class Event {
  @Input() eventDetail: any;

  description: string;

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    if (this.eventDetail.description.length > 255) {
       this.description = this.eventDetail.description.substring(0, 255) + '<span class="more-description"> ...Learn More</span>';
    }
  }

  displayFullDescription() {
    this.description = this.eventDetail.description;
  }

  ngAfterViewInit() {
    var el = this.elementRef.nativeElement.querySelector('.more-description');
    if(el) {
      el.addEventListener('click', this.displayFullDescription.bind(this));
    }
  }
}

Plunker Example

Note: It would be better if you store handler in class property so that you can unsubscribe later.

edited Aug 3, 2018 at 14:57

Exil

3292 gold badges12 silver badges27 bronze badges

answered May 16, 2017 at 20:19

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

9 Comments

David Aguirre Over a year ago

this is not working. The event listener is never attached.

David Aguirre Over a year ago

So the issue is that the description is returned by a service call. So now the question is: "How do I attach an event listener to a dynamic element appended after a service call?"

yurzui Over a year ago

stackoverflow.com/questions/43457149/…

yurzui Over a year ago

Create plunker to reproduce it. As i said early you can call cdRef.detectChanges() to update view after initialization description

yurzui Over a year ago

@Sanyami Vaidya Try el.addEventListener('click', this.displayFullDescription.bind(this, param)) or el.addEventListener('click', () => this.displayFullDescription(param))

|

Collectives™ on Stack Overflow

Adding event listener to dynamic element in Angular 4?

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related