CODEWITHSUNDEEP
javascripthtmlangulartypescriptinnerhtml
Yash Suryavanshi
Yash Suryavanshi

Reputation: 67

How to edit and render inner html stored as a string?

I have an HTML snippet coming from a variable of type string. Consider, the following statements stored as a string type variable, 

displayContent =
    `<div>
        <img alt="image1" src="image1.jpeg"/>
    </div>
    <div>
        <p>Some random text</p>
        <img alt="image2" src="image2.jpeg"/>
        <p>Some random text again</p>
        <img alt="image3" src="image3.jpeg"/>
        <p>Some random text</p>
    </div>`

Now, I have to display the string variable 'displayContent' in an HTML page where the 'displayContent' renders as an html text.

I used this: <span [innerHTML]='displayContent'> It rendered the HTML code of variable 'displayContent' beautifully inside my main HTML page.

Now, images from certain sources are larger than my page size. I need to add a style element to every <img /> such as <img style="max-width: 100%" />

To achieve this, we can simply use a replace() in our javascript file as displayContent = displayContent.replace(/<img/gi,'<img style="max-width: 100%" ')

So, our new 'displayContent' becomes 

`<div>
    <img style="max-width: 100%" alt="image1" src="image1.jpeg"/>
</div>
<div>
    <p>Some random text</p>
    <img style="max-width: 100%" alt="image2" src="image2.jpeg"/>
    <p>Some random text again</p>
    <img style="max-width: 100%" alt="image3" src="image3.jpeg"/>
    <p>Some random text</p>
</div>`

Now, when I render this updated variable using <span [innerHTML]='displayContent'> it does not scale my images in any way. The images still are of their original size.

Moreover there is no update in the Image Styles property in developer tools of the browser. Click here to see developer tools Styles

Upvotes: 2

Views: 1845

Answers (2)

Powkachu
Powkachu

Reputation: 2268

I found (maybe) a solution here.

It says that we have to sanitize the HTML to apply style.

Create a new pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";
@Pipe({
  name: 'safeHtml',
})
export class SafeHtmlPipe implements PipeTransform {

  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

Don't forget to add your pipe to your module under declarations

@NgModule({
  declarations: [
    ...
    SafeHtmlPipe,
],

Import it and use it:

<span [innerHTML]="displayContent | safeHtml">

Upvotes: 1

Tomasz Kula
Tomasz Kula

Reputation: 16837

You must bind the [innerHTML] to SafeHtml using DomSanitizer.

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

@Component({
  selector: 'my-app',
  template: `
   <div [style.width.px]="300">
     <div [innerHtml]="safeHTML"></div>
   </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  html = '<img src="https://via.placeholder.com/1000x1000" style="max-width: 100%" />';

  get safeHTML(): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(this.html);
  }

  constructor(private sanitizer: DomSanitizer) { }
}

Live demo

Upvotes: 0

Related Questions