Angular HTML binding

Question

I am writing an Angular application and I have an HTML response I want to display    How do I do that  If I simply use the binding syntax   myVal   it encodes all HTML characters  of course    I need somehow to bind the innerHTML of a div to the variable value

User · Answer

You can also bind the angular component class properties with template using DOM property binding.

Example: <div [innerHTML]="theHtmlString"></div>

Using canonical form like below:

<div bind-innerHTML="theHtmlString"></div>

Angular Documentation: https://angular.io/guide/template-syntax#property-binding-property

See working stackblitz example here

User · Answer

Angular 2 0 0 and Angular 4 0 0 final    For safe content just   lt div  innerHTML   myVal  gt  lt  div gt    DOMSanitizer  Potential unsafe HTML needs to be explicitly marked as trusted using Angulars DOM sanitizer so doesn t strip potentially unsafe parts of the content    lt div  innerHTML   myVal   safeHtml  gt  lt  div gt    with a pipe like   Pipe  name   safeHtml    export class Safe     constructor private sanitizer DomSanitizer       transform style        return this sanitizer bypassSecurityTrustHtml style         return this sanitizer bypassSecurityTrustStyle style          return this sanitizer bypassSecurityTrustXxx style   - see docs         See also In RC 1 some styles can  39 t be added using binding syntax  And docs  https   angular io api platform-browser DomSanitizer  Security warning  Trusting user added HTML may pose a security risk  The before mentioned docs state      Calling any of the bypassSecurityTrust    APIs disables Angular s built-in sanitization for the value passed in  Carefully check and audit all values and code paths going into this call  Make sure any user data is appropriately escaped for this security context  For more detail  see the Security Guide    Angular markup  Something like  class FooComponent     bar    bar     foo     lt div gt   bar   lt  div gt       lt my-comp gt  lt  my-comp gt       lt input   ngModel    bar  gt      with   lt div  innerHTML   foo  gt  lt  div gt    won t cause Angular to process anything Angular-specific in foo  Angular replaces Angular specific markup at build time with generated code  Markup added at runtime won t be processed by Angular   To add HTML that contains Angular-specific markup  property or value binding  components  directives  pipes       it is required to add the dynamic module and compile components at runtime  This answer provides more details How can I use create dynamic template to compile dynamic Component with Angular 2 0

User · Answer

Just simply use  innerHTML  attribute in your HTML  something like this below    lt div  innerHTML   myVal  gt  lt  div gt       Ever had properties in your component that contain some html markup or   entities that you need to display in your template  The traditional   interpolation won t work  but the innerHTML property binding comes to   the rescue    Using   myVal   Does NOT work as expected  This won t pick up the HTML tags like  lt p gt    lt strong gt  etc and pass it only as strings     Imagine you have this code in your component    const myVal string    lt strong gt Stackoverflow lt  strong gt  is  lt em gt helpful  lt  em gt    If you use   myVal    you will get this in the view    lt strong gt Stackoverflow lt  strong gt  is  lt em gt helpful  lt  em gt    but using  innerHTML   myVal makes the result as expected like this   Stackoverflow is helpful

User · Answer

You can use several approaches to achieve the solution  As already said in the approved answer  you can use    lt div  innerHTML   myVal  gt  lt  div gt    depending on what you are trying to achieve  you can also try other things like javascript DOM  not recommended  DOM operations are slow    Presentation   lt div id  test  gt  lt  test gt    Component  var p   document getElementsById  test    p outerHTML   myVal    Property Binding  Javascript DOM Outer HTML

User · Answer

You can use the Following two ways   lt div  innerHTML   quot myVal quot  gt  lt  div gt   or  lt div innerHTML  quot   myVal   quot  gt  lt  div gt

User · Answer

Using  innerHTML  directly without using Angular s DOM sanitizer is not an option if it contains user-created content  The safeHtml pipe suggested by  G  nterZ  chbauer in his answer is one way of sanitizing the content  The following directive is another one   import   Directive  ElementRef  Input  OnChanges  Sanitizer  SecurityContext    SimpleChanges   from   angular core       Sets the element s innerHTML to a sanitized version of  safeHtml   Directive   selector    safeHtml      export class HtmlDirective implements OnChanges      Input   safeHtml  string     constructor private elementRef  ElementRef  private sanitizer  Sanitizer        ngOnChanges changes  SimpleChanges   any       if   safeHtml  in changes          this elementRef nativeElement innerHTML           this sanitizer sanitize SecurityContext HTML  this safeHtml                 To be used   lt div  safeHtml   myVal  gt  lt  div gt

User · Answer

Short answer was provided here already  use  lt div  innerHTML   yourHtml  gt  binding   However the rest of the advices mentioned here might be misleading  Angular has a built-in sanitizing mechanism when you bind to properties like that  Since Angular is not a dedicated sanitizing library  it is overzealous towards suspicious content to not take any risks  For example  it sanitizes all SVG content into empty string   You might hear advices to  sanitize  your content by using DomSanitizer to mark content as safe with bypassSecurityTrustXXX methods  There are also suggestions to use pipe to do that and that pipe is often called safeHtml   All of this is misleading because it actually bypasses sanitizing  not sanitizing your content  This could be a security concern because if you ever do this on user provided content or on anything that you are not sure about     you open yourself up for a malicious code attacks   If Angular removes something that you need by its built-in sanitization     what you can do instead of disabling it is delegate actual sanitization to a dedicated library that is good at that task  For example     DOMPurify   I ve made a wrapper library for it so it could be easily used with Angular  https   github com TinkoffCreditSystems ng-dompurify  It also has a pipe to declaratively sanitize HTML    lt div  innerHtml   value   dompurify  gt  lt  div gt    The difference to pipes suggested here is that it actually does do the sanitization through DOMPurify and therefore work for SVG   One thing to keep in mind is DOMPurify is great for sanitizing HTML SVG  but not CSS  So you can provider Angular s CSS sanitizer to handle CSS   import  NgModule    sanitizeStyle  from   angular core   import  SANITIZE STYLE  from   tinkoff ng-dompurify     NgModule                  providers                          provide  SANITIZE STYLE              useValue    sanitizeStyle                                  export class AppModule      It s internal     hense   prefix  but this is how Angular team use it across their own packages as well anyway  That library also works for Angular Universal and server side renedring environment

User · Answer

In Angular 2 you can do 3 types of bindings     property   expression  -  Any html property can link to an expression  In this case  if expression changes property will update  but this doesn t work the other way   event   expression  -  When event activates execute expression    ngModel    property  -  Binds the property from js  or ts  to    html  Any update on this property will be noticeable everywhere    An expression can be a value  an attribute or a method  For example   4    controller var    getValue     Example here

User · Answer

If you have templates in your angular  or whatever framework  application  and you return HTML templates from your backend through a HTTP request response  you are mixing up templates between the frontend and the backend   Why not just leave the templating stuff either in the frontend  i would suggest that   or in the backend  pretty intransparent imo    And if you keep templates in the frontend  why not just respond with JSON for requests to the backend  You do not even have to implement a RESTful structure  but keeping templates on one side makes your code more transparent   This will pay back when someone else has to cope with your code  or even you yourself are re-entering your own code after a while    If you do it right  you will have small components with small templates  and best of all  if your code is imba  someone who doesn t know coding languages will be able to understand your templates and your logic  So additionally  keep your functions methods as small you can  You will eventually find out that maintaining  refactoring  reviewing  and adding features will be much easier compared to large functions methods classes and mixing up templating and logic between the frontend and the backend - and keep as much of the logic in the backend if your frontend needs to be more flexible  e g  writing an android frontend or switching to a different frontend framework    Philosophy  man     p s   you do not have to implement 100  clean code  because it is very expensive - especially if you have to motivate team members    but  you should find a good balance between an approach to cleaner code and what you have  maybe it is already pretty clean   check the book if you can and let it enter your soul  https   de wikipedia org wiki Clean Code

User · Answer

Just to post a little addition to all the great answers so far  If you are using  innerHTML  to render Angular components and are bummed about it not working like me  have a look at the ngx-dynamic-hooks library that I wrote to address this very issue  With it  you can load components from dynamic strings html without compromising security  It actually uses Angular s DOMSanitizer just like  innerHTML  does as well  but retains the ability to load components  in a safe manner   See it in action in this Stackblitz

User · Answer

The correct syntax is the following   lt div  innerHTML   quot theHtmlString quot  gt  lt  div gt   Documentation Reference

User · Answer

innerHtml  is great option in most cases  but it fails with really large strings or when you need hard-coded styling in html   I would like to share other approach   All you need to do  is to create a div in your html file and give it some id    lt div  dataContainer gt  lt  div gt    Then  in your Angular 2 component  create reference to this object  TypeScript here    import   Component  ViewChild  ElementRef   from   angular core     Component       templateUrl   some html file     export class MainPageComponent         ViewChild  dataContainer   dataContainer  ElementRef       loadData data            this dataContainer nativeElement innerHTML   data            Then simply use loadData function to append some text to html element   It s just a way that you would do it using native javascript  but in Angular environment  I don t recommend it  because makes code more messy  but sometimes there is no other option   See also Angular 2 - innerHTML styling

User · Answer

We can always pass html content to innerHTML property to render html dynamic content but that dynamic html content can be infected or malicious also  So before passing dynamic content to innerHTML we should always make sure the content is sanitized  using DOMSanitizer  so that we can escaped all malicious content   Try below pipe   import   Pipe  PipeTransform   from   angular core   import   DomSanitizer   from   angular platform-browser     Pipe  name   safeHtml    export class SafeHtmlPipe implements PipeTransform       constructor private sanitized  DomSanitizer              transform value  string            return this sanitized bypassSecurityTrustHtml value            Usage   lt div  innerHTML   content   safeHtml  gt  lt  div gt

User · Answer

x000D   x000D    lt div  innerHTML   HtmlPrint  gt  lt  div gt  lt br gt  x000D   x000D   x000D    The innerHtml is a property of HTML-Elements  which allows you to set it   s html-content programatically  There is also a innerText property which defines the content as plain text   The  attributeName   value  box bracket   surrounding the attribute defines an Angular input-binding  That means  that the value of the property  in your case innerHtml  is bound to the given expression  when the expression-result changes  the property value changes too   So basically  innerHtml  allows you to bind and dynamically change the html-conent of the given HTML-Element

User · Answer

If you want that in Angular 2 or Angular 4 and also want to keep inline CSS then you can use   lt div  innerHTML   theHtmlString   keepHtml  gt  lt  div gt

User · Answer

Just to make for a complete answer  if your html content is in a component variable  you could also use   lt div  innerHTML  componentVariableThatHasTheHtml gt  lt  div gt

User · Answer

Please refer to other answers that are more up-to-date    This works for me   lt div innerHTML       myVal     gt  lt  div gt   Angular2  Alpha 33   According to another SO  Inserting HTML from server into DOM with angular2  general DOM manipulation in Angular2    inner-html  is equivalent to  ng-bind-html  in Angular 1 X

User · Answer

You can apply multiple pipe for style  link and HTML as following in  html   lt div  innerHTML   announcementContent   safeUrl  safeHtml  gt                       lt  div gt    and in  ts pipe for  URL  sanitizer   import   Component  Pipe  PipeTransform   from   angular core   import   DomSanitizer   from   angular platform-browser     Pipe   name   safeUrl     export class SafeUrlPipe implements PipeTransform       constructor private sanitizer  DomSanitizer         transform url            return this sanitizer bypassSecurityTrustResourceUrl url             pipe for  HTML  sanitizer   import   Component  Pipe  PipeTransform   from   angular core   import   DomSanitizer   from   angular platform-browser     Pipe       name   safeHtml     export class SafeHtmlPipe implements PipeTransform       constructor private sanitized  DomSanitizer         transform value            return this sanitized bypassSecurityTrustHtml value             this will apply both without disturbing any style and link click event

User · Answer

I apologize if I am missing the point here  but I would like to recommend a different approach   I think it s better to return raw data from your server side application and bind it to a template on the client side  This makes for more nimble requests since you re only returning json from your server    To me it doesn t seem like it makes sense to use Angular if all you re doing is fetching html from the server and injecting it  as is  into the DOM   I know Angular 1 x has an html binding  but I have not seen a counterpart in Angular 2 0 yet  They might add it later though  Anyway  I would still consider a data api for your Angular 2 0 app   I have a few samples here with some simple data binding if you are interested  http   www syntaxsuccess com viewarticle angular-2 0-examples

User · Answer

The way to dynamically add elements to DOM  as explained on Angular 2 doc  is by using ViewContainerRef class from  Angular core   What you have to do is to declare a directive that will implement ViewContainerRef and act like a placeholder on your DOM   Directive  import   Directive  ViewContainerRef   from   angular core     Directive     selector    appInject      export class InjectDirective      constructor public viewContainerRef  ViewContainerRef           Then  in the template where you want to inject the component   HTML   lt div class  where you want to inject  gt         lt ng-template appInject gt  lt  ng-template gt   lt  div gt    Then  from the injected component code  you will inject the component containing the HTML you want   import   Component  OnInit  ViewChild  ComponentFactoryResolver   from   angular core   import   InjectDirective   from     inject directive   import   InjectedComponent   from     injected injected component     Component     selector   app-parent     templateUrl     parent component html     styleUrls      parent component css      export class ParentComponent implements OnInit       ViewChild InjectDirective  injectComp  InjectDirective     constructor private  componentFactoryResolver  ComponentFactoryResolver           ngOnInit            public addComp         const componentFactory   this  componentFactoryResolver resolveComponentFactory InjectedComponent       const viewContainerRef   this injectComp viewContainerRef      const componentRef   viewContainerRef createComponent componentFactory          public removeComp         const componentFactory   this  componentFactoryResolver resolveComponentFactory InjectedComponent       const viewContainerRef   this injectComp viewContainerRef      const componentRef   viewContainerRef remove             I added a fully working demo app on Angular 2 dynamically add component to DOM demo

User · Answer

On angular2 2 0 0-alpha 44   Html-Binding will not work when using an   interpolation    use an  Expression  instead   invalid   lt p  innerHTML     item anleser    gt  lt  p gt    -  throws an error  Interpolation instead of expected Expression   correct   lt p  innerHTML   item anleser  gt  lt  p gt    -  this is the correct way   you may add additional elements to the expression  like    lt p  innerHTML     lt b gt   item anleser   lt  b gt    gt  lt  p gt    hint  HTML added using  innerHTML   or added dynamically by other means like element appenChild   or similar  won t be processed by Angular in any way except sanitization for security purposed  Such things work only when the HTML is added statically to a components template  If you need this  you can create a component at runtime like explained in How can I use create dynamic template to compile dynamic Component with Angular 2 0

User · Answer

Working in Angular v2 1 1   lt div  innerHTML   variable or htmlString  gt   lt  div gt

[angular] Angular HTML binding

Examples related to angular

Examples related to angular2-template

Examples related to angular2-databinding