JQuery .replaceWith Angular2 content

Question

I am working on a project using both JQuery and Angular2 in order to use a JQuery library.

My problem is when it comes to replace DOM element with Angular2 code using JQuery.

I am expecting the below code to add Angular code in the DOM element:

let myContainer = <HTMLElement>document.querySelector(".question-text");
myContainer.innerHTML = "<span>{{model?.text}}</span>";

What it does instead, is to replace the innerHTML setting the {{model?.text}} as a string and not as a dynamic content.

Is there a way to achieve it? Any help is welcome

if you want to add dynamic element you can use renderer2 angular service — Chellappan வ, Jul 18 '18 at 09:23

score 0 · Accepted Answer · answered Jul 18 '18 at 09:25

0

I would suggest to use ngIf and set a flag if you want to render your content, so you actually need no jQuery for it.

answered Jul 18 '18 at 09:25

Code Spirit

thank you for the effort, I tried your solutions but unfortunately the result is the same - it parses the `{{model?.text}}` as a string and not as a dynamic content. The *ngIf approach looks more suitable though. Thank you – George George Jul 18 '18 at 09:40

score 0 · Answer 2 · answered Jul 18 '18 at 09:26

0

You need to something like $compile( "<span>{{model?.text}}</span>" )( $scope ); Inject $compile before that

answered Jul 18 '18 at 09:26

Nahid

2 Answers2