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

Answer 1

Maybe you can find a Solution here: TypeScript - Append HTML to container element in Angular 2

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.

Answer 2

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