Show html color from a string

Question

I have a string, in a variable "prod.de.description", that is a description of an object, like that:

"<p><strong>Test</strong></p><p><strong><span style="background-color: #ed7e32;">Test2</span></strong></p>"

When I use innerhtml, it's show only the strong but not the background color. Here is the html code and the result:

 <div class="col-10" style="padding-left:0; font-size:0.9rem">
    <div class="row">
      <div class="col-3 text-right">
        <label class="modal-tag">DESCRIPTION</label>
      </div>
      <div class="col-9">
        <p [innerHTML]="prod.de.description"></p>
      </div>
    </div>

That's what I get since now:

Why I don't get the background color under Test2 but only the strong? I'm newbie of HTML. Thanks a lot!

Try putting single quotation inside double quotations. Or the vice versa. Like "TestTest2" — Debsmita Paul
– Debsmita Paul, Commented Jul 2, 2020 at 13:32
you have to take care of the literal double quotes in some way, either replace double quotes in the string with single quotes or wrap the string in single quotes instead — Nikos M.
– Nikos M., Commented Jul 2, 2020 at 13:34

Jax-p · Accepted Answer · 2020-07-02 13:35:28Z

2

You are using same quotation marks (") inside and outside of string. That might cause the problem. Use different ones. Maybe something like this:

"<p><strong>Test</strong></p><p><strong><span style='background-color: #ed7e32;'>Test2</span></strong></p>"

answered Jul 2, 2020 at 13:35

Jax-p

8,8246 gold badges35 silver badges69 bronze badges

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

Comments

vipul patel · Accepted Answer · 2020-07-07 07:10:28Z

1

you are using innerHTML directive of framework and it sanitises the content before putting into your dom. It will remove styles tag and script things as security issue. Outsiders can attack with their on content. To prevent that, framework does this thing.

However, framework also gives way to escape this when you know that you are putting content from trusted sources.

Follow this link:

https://stackblitz.com/edit/angular-8-app-example-mzdwkd

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  {

  description = '<p><strong>Test</strong></p><p><span style="background-color: #ed7e32;">Test2</span></p>';

  constructor(private sanitizer: DomSanitizer){}

   transformYourHtml(htmlTextWithStyle) {
       return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
   }
  }

HTML:

edited Jul 7, 2020 at 7:10

answered Jul 2, 2020 at 13:43

vipul patel

7504 silver badges10 bronze badges

2 Comments

Rob None Over a year ago

Tried this, but still does not work...really I have no idea how to solve.

vipul patel Over a year ago

@RobNone Hi Sorry, i understood that you are not using any framework. I thought you are using pure innerHTML tag. However, you are using framework [innerHTML] directive and which checks content before putting into dom for security checks. I have updated my answer

Collectives™ on Stack Overflow

Show html color from a string

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related