-1

I am loading HTML containing angular expression from database. ex db html: <div>{{dynamicContent}} </div>

I already have ngModel for "dynamicContent" in my component. Problem: When I load html from db it prints as plain html. It should evaluate html and print ngModel value.

In angular 1 I was using $compile for same, how can I achive this with angular 6?

this.sanitizer.bypassSecurityTrustHtml(value);

<div class="col-md-4 col-sm-4 col-12 offset-md-1"  innerHtml="{{dynamicContent}}">

Shiri
  • 47
  • 1
  • 10
  • Please consider using `DomSanitizer#sanitize` which _unwraps the safe value and use it directly_ instead of `DomSanitizer#bypassSecurityTrustHtml` which _bypasses the security and trust the given value to be safe HTML_ (note that this may expose your app to XSS security risks). See https://angular.io/api/platform-browser/DomSanitizer#sanitize and https://angular.io/api/platform-browser/DomSanitizer#bypasssecuritytrusthtml for more info. – Edric Jan 17 '19 at 13:56

3 Answers3

0

It's pretty much the same thing in Angular 2+.

The right syntax is <div [innerHTML]="theHtmlString"></div>

The sanitization will be done automatically, preventing evil script tags from being injected into your div. Source: Angular - Template syntax

Guerric P
  • 30,447
  • 6
  • 48
  • 86
  • It prints html, but interpolation not working. angular expression are not evaluated it gets printed as plain text. – Shiri Jan 17 '19 at 14:48
  • Yes as I wrote here https://chat.stackoverflow.com/transcript/message/45094468#45094468 you won't be able to interpolate variables in dynamic HTML, only in static HTML – Guerric P Jan 17 '19 at 15:21
  • Is there any another way to do this stuff. – Shiri Jan 17 '19 at 15:25
  • If you have no other choice than loading HTML from your DB (which is pretty unusual), then I suggest you to replace the variables manually before rendering, or to store the HTML code as a tree of elements in your DB, then recreate them using https://angular.io/api/core/Renderer2 and a recursive function – Guerric P Jan 17 '19 at 15:32
  • he specifically asked for something similar with $compile from AngularJs. He needs interpolation. This is just a useless answer. – bokkie Jul 15 '20 at 16:01
-1

Please use the below method i think this will work for you.

<div class="col-md-4 col-sm-4 col-12 offset-md-1" [innerHtml]="dynamicContent">

Ankur Shah
  • 412
  • 6
  • 16
  • Wrong case and useless parenthesis – Guerric P Jan 17 '19 at 13:19
  • @YoukouleleY yes your right if want two way binding then it is useful – Ankur Shah Jan 17 '19 at 13:34
  • Parenthesis mean "wait for an event emitted by `innerHTMLChange` and assign the emitted value into `dynamicContent`" which makes no sense since there is no such event emitter. So parenthesis are 100% useless – Guerric P Jan 17 '19 at 13:46
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186862/discussion-between-ankur-shah-and-youkouleley). – Ankur Shah Jan 17 '19 at 13:51
-1

You could do 

div class="col-md-4 col-sm-4 col-12 offset-md-1" >{{dynamicContent | safeHtml"}}</Div>

or

<div class="col-md-4 col-sm-4 col-12 offset-md-1"  [innerHtml]="dynamicContent| safeHtml"></div>
soorapadman
  • 4,451
  • 7
  • 35
  • 47
  • It prints html, but interpolation not working. angular expression are not evaluated it gets printed as plain text. – Shiri Jan 17 '19 at 14:48