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 வ
– Chellappan வ, Commented Jul 18, 2018 at 9:23

Code Spirit · Accepted Answer · 2018-07-18 09:25:42Z

0

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.

answered Jul 18, 2018 at 9:25

Code Spirit

5,1776 gold badges30 silver badges50 bronze badges

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

1 Comment

George George Over a year ago

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

Nahid · Accepted Answer · 2018-07-18 09:26:10Z

0

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

answered Jul 18, 2018 at 9:26

Nahid

1869 bronze badges

Collectives™ on Stack Overflow

JQuery .replaceWith Angular2 content

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related