Question

76

Adding event listener to dynamic element in Angular 4?

rated 0 times [ 80] [ 4] / answers: 1 / hits: 15751 / 7 Years ago, tue, may 16, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

monicag

Add To Favorites

Follow

Total Points: 651

Total Questions: 106

Total Answers: 104

Location: Grenada

Member since Sun, Dec 20, 2020

4 Years ago

monicag questions

1 Headless UI Dropdown - Open menu above the button

Sun, Feb 6, 22, 00:00, 2 Years ago

1 how to send data From one component to another components with context in react?

Fri, Jan 14, 22, 00:00, 2 Years ago

1 Using Where and Order by different fields in Firestore query

Mon, Nov 29, 21, 00:00, 3 Years ago

1 jest.advanceTimersByTime doesn't work when I try to test my retry util function

Fri, Feb 26, 21, 00:00, 3 Years ago

1 How to fade-out and fade-in in React?

Fri, Jan 15, 21, 00:00, 3 Years ago

View All

answered 7 Years ago hallie · Accepted Answer

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.