title: Add custom multiline HTML content to MatCell in Angular Material Table
body: <p>I would like to add multilines with different styles to my table cells. The Angular Material table seems to strip my HTML code away though. How can I achieve something similar like in <a href="https://git-scm.com/book/en/v2/images/gitlab-users.png" rel="noreferrer">Gitlab </a> where the first line (e.g. "Administrator") inside one row/item is styled different as the second one (e.g. email-address) as shown in the code example.</p>
  
  <h2>table-component.html</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-container matColumnDef="name"&gt;
     &lt;mat-header-cell *matHeaderCellDef&gt;{{header}}&lt;/mat-header-cell&gt;
     &lt;mat-cell *matCellDef="let row"&gt;
  
        &lt;!-- first approach --&gt;
        &lt;div class="firstline"&gt;{{row.firstline}}&lt;/div&gt;
        &lt;div class="secondline"&gt;{{row.secondline}}&lt;/div&gt;
  
        &lt;!-- second approach --&gt;
        &lt;multiline-component [firstline]="row.firstline" [secondline]="row.secondline"&gt;&lt;/multiline-component&gt;
  
     &lt;/mat-cell&gt;
  &lt;/ng-container&gt;
  
  </code></pre>
  
  <h2>multiline-component.html</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="firstline"&gt;{{firstline}}&lt;/div&gt; // I want to be bold
  &lt;div class="secondline"&gt;{{secondline}}&lt;/div&gt; // I want to be just regular
  </code></pre>
  
  <p>I have tried to use the [innerHTML] with a bypassSecurityTrustHtml()-Pipe to prevent the stripping without success. Also I have tried to use a custom component with [firstline] and [secondline] property bindings.</p>