Angular: innerHTML is not taking inline styles

usersRal1 0
Viewed 48

We have privacy policy text, which is around 7000 words and we need to keep on changing it on monthly basis. so we inserted HTML with inline CSS into the database and rendered it using service. Because of legacy, we can't change this method.

From the Angular side we are using this:

<div class="col-auto privacy-policy-body"
            [innerHtml]="loginService.userDetails.privacyPolicy?.split('</script>')[1]"></div>

The issue is, that inline CSS is not applicable to it.

Here is the sample code with stackblitz link: https://stackblitz.com/edit/angular-inner-html-demo-j53jsf?file=app%2Fapp.component.ts

angular
2 Answers

By default Angular will sanitize any values inserted into the DOM.

You can bypass this behavior by using the DomSanitizer:

Example:

export class AppComponent  {
  rawHtml = '<p> Hello <span style="color: cornflowerblue;">World</span></b></p>';

  trustedHtml = this.sanitizer.bypassSecurityTrustHtml(this.rawHtml);

  constructor(public sanitizer: DomSanitizer) {}
}

StackBlitz example.

BizzyBob0 
  import { Component } from '@angular/core';
  import { DomSanitizer } from '@angular/platform-browser';

  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
  })


  export class AppComponent {
    constructor(public sanitizer: DomSanitizer) {}
    abc:any
    name = 'Angular 5';

    example: string = `<div>this is another div <br/> i want to insert dynamically</div>`;
    test: string =
      '<script type="text/javascript">\n      var m = document.createElement(\'meta\');\n      m.name = \'robots\';\n      m.content = \'noindex, nofollow\';\n      document.head.appendChild(m);\n\n      var g = document.createElement(\'meta\');\n      g.name = \'googlebot\';\n      g.content = \'noindex, nofollow\';\n      document.head.appendChild(g);\n  </script><html>\n    <head>\n        <title>Privacy Policy Pop up text</title>\n        <style>\n            .privacy-policy{\n                font-family: Arial; font-size: 16pt; color: #711984;\n            }\n            .overview{\n                font-family: Arial;\n                font-size: 11pt;\n                color: #711984;\n                font-weight: 600;\n\n            }\n        </style>\n    </head>\n    <body>\n\n     <p class="privacy-policy"><strong>Website Privacy Notice </strong>\n<p style="font-family: Arial; font-size: 12pt" align="left">Last updated May 2021</p>\n<p style="font-family: Arial; font-size: 11pt"> some Text </p>\n  <p style="font-family: Arial; font-size: 11pt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>\n  <p style="font-family: Arial; font-size: 11pt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>\n</body>\n</html>';

      ngOnInit() {
        this.abc=this.sanitizer.bypassSecurityTrustHtml(this.test); 
      }

      
    }

paste this and it will work

and in html

<div [innerHTML] ="abc"></div>
Chinmaya Sahoo0
Related