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 Gitlab 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.
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>{{header}}</mat-header-cell>
<mat-cell *matCellDef="let row">
<!-- first approach -->
<div class="firstline">{{row.firstline}}</div>
<div class="secondline">{{row.secondline}}</div>
<!-- second approach -->
<multiline-component [firstline]="row.firstline" [secondline]="row.secondline"></multiline-component>
</mat-cell>
</ng-container>
<div class="firstline">{{firstline}}</div> // I want to be bold
<div class="secondline">{{secondline}}</div> // I want to be just regular
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.
When using mat-table, mat-row and mat-cell directives as tags rather than attributes on the html table, tr, td's the layout is flex, so you need to style the table accordingly.
The elements are layed-out sideways as mat-cell is "flex: row".
If you wrap the contents you want multi-line in a "div" that should do it:
<mat-cell *matCellDef="let row">
<div>
<div class="firstline">{{row.firstline}}</div>
<div class="secondline">{{row.secondline}}</div>
</div>
</mat-cell>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With