title: How to edit and render inner html stored as a string?
body: <p>I have an HTML snippet coming from a variable of type string.
  Consider, the following statements stored as a string type variable, </p>
  
  <pre><code>displayContent =
      `&lt;div&gt;
          &lt;img alt="image1" src="image1.jpeg"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;p&gt;Some random text&lt;/p&gt;
          &lt;img alt="image2" src="image2.jpeg"/&gt;
          &lt;p&gt;Some random text again&lt;/p&gt;
          &lt;img alt="image3" src="image3.jpeg"/&gt;
          &lt;p&gt;Some random text&lt;/p&gt;
      &lt;/div&gt;`
  </code></pre>
  
  <p>Now, I have to display the string variable 'displayContent' in an HTML page where the 'displayContent' renders as an html text.</p>
  
  <p>I used this: <code>&lt;span [innerHTML]='displayContent'&gt;</code>
  It rendered the HTML code of variable 'displayContent' beautifully inside my main HTML page.</p>
  
  <p>Now, images from certain sources are larger than my page size. I need to add a style element to every <code>&lt;img /&gt;</code> such as <code>&lt;img style="max-width: 100%" /&gt;</code></p>
  
  <p>To achieve this, we can simply use a <code>replace()</code> in our javascript file as 
      <code>displayContent = displayContent.replace(/&lt;img/gi,'&lt;img style="max-width: 100%" ')</code></p>
  
  <p>So, our new 'displayContent' becomes </p>
  
  <pre><code>`&lt;div&gt;
      &lt;img style="max-width: 100%" alt="image1" src="image1.jpeg"/&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;p&gt;Some random text&lt;/p&gt;
      &lt;img style="max-width: 100%" alt="image2" src="image2.jpeg"/&gt;
      &lt;p&gt;Some random text again&lt;/p&gt;
      &lt;img style="max-width: 100%" alt="image3" src="image3.jpeg"/&gt;
      &lt;p&gt;Some random text&lt;/p&gt;
  &lt;/div&gt;`
  </code></pre>
  
  <p>Now, when I render this updated variable using 
  <code>&lt;span [innerHTML]='displayContent'&gt;</code> it does not scale my images in any way.
  The images still are of their original size.</p>
  
  <p>Moreover there is no update in the Image Styles property in developer tools of the browser. <a href="https://i.stack.imgur.com/K0moT.png" rel="nofollow noreferrer">Click here to see developer tools Styles</a></p>