title: Angular strips out data attribute from innerHTML
body: <p>I have a string returned from an API endpoint as below:</p>
  <pre><code>If you died tomorrow, your wife &lt;span class='person' data-relationship='Relationship.Wife' data-avatarid='1212'&gt;Alice&lt;/span&gt; will lose everything.
  </code></pre>
  <p>So to display this as HTML I'm using the innterHTML property:</p>
  <pre><code>&lt;p *ngFor=&quot;let con1Died of consequences?.client1Died&quot; [innerHTML]=&quot;con1Died&quot;&gt;&lt;/p&gt;
  </code></pre>
  <p>But this is outputted to the browser with the data attributes stripped out as:</p>
  <pre><code>&lt;p _ngcontent-smy-c63=&quot;&quot;&gt;If you died tomorrow, your wife &lt;span class=&quot;person&quot;&gt;Alice&lt;/span&gt; will lose everything.&lt;/p&gt;
  </code></pre>
  <p>How can I output this WITH the data attributes? Is there a way to this?</p>
  <p>EDIT: So I tried the HTML sanitation technique from below but the CSS still isn't applied:</p>
  <p><a href="https://i.stack.imgur.com/fj24K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fj24K.png" alt="enter image description here" /></a></p>
  <pre><code>this.reportsService.getConsequences().subscribe(res =&gt; {
        // Load the consequences to angular
        this.consequences = res;
        this.client1Died = new Array();
        this.consequences.client1Died.forEach(element =&gt; {
          const safehtml = this.sanitized.bypassSecurityTrustHtml(element);
          this.client1Died.push(safehtml);
        });
        console.log(this.client1Died);
      });
  </code></pre>