1

I have HTML string returned from an external API call. I want to compile that HTML string and get a compiled htmlElement by id 'test-input'. I keep getting null or undefined when getting an element from DOM. I am using the library for the p3x-angular-compile plugin:

I used ElementRef and tried querySelector on the nativeElement. Still getting null.

this.template = '<div id="test-input"><input type="text"></div>';

What's expected is that once this template is rendered and compiled, I need the element in order to continue with other manipulation.

Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
npabs18
  • 167
  • 2
  • 10
  • ` [p3x-compile]="template" [p3x-compile-ctx]="this" ` This is required in your html template as described in the docs of p3x-angular-compile. Do have something like this in your html template? – LittleGnome May 13 '19 at 16:08
  • @LittleGnome Yes, i forgot to include that in my code snippet. I have this in my html template:
    – npabs18 May 13 '19 at 19:14
  • You also tried to wait a tick before retrieving the element via an querySelector? `// code setTimeout(() => {}); document.querySelector('id or className');` It is possible that the DOM isn't updated in an instant, and that the taskqueManager need a tick to update the DOM. – LittleGnome May 13 '19 at 19:27
  • @LittleGnome Thank you for your response. It's much appreciated. However, I was trying to look for a solution that would not require the use of timeouts in my logic. If all else fails, I will probably use a timeout. – npabs18 May 14 '19 at 14:59

0 Answers0