Style is not applied after sanitization and [innerHTML]

Question

I have a mat-table:

      <ng-container matColumnDef="quantity">
        <th mat-header-cell *matHeaderCellDef> Operation </th>
        <td mat-cell *matCellDef="let element" class='operation' [innerHTML]='quantity(element.quantity)'>
        </td>
      </ng-container>

table-component.ts

  quantity(numbers: number[]) : any {
    return this.sanitizer.bypassSecurityTrustHtml(
    numbers.map(n => n > 0 
      ? `<span class="add">+ ${n}</span>`
      : `<span class="remove"> ${n}</span>`
    ).join('<br />'));
  }

table-component.scss

span.add {
  color: green !important;
}

span.remove {
  color: rgb(216, 0, 0) !important;
}

When I inspect the table cell it all looks good:

And the end result in the table itself:

What am I doing wrong?

Edit:

Ok, I found out that the problem is the simulated encapsulation. (which I don't want to disable). If I add a normal span in the component template it all works because it looks like this:

I originally used this approach because some cells can have lots of items and an ngFor that generates ~ 200 (x 5 rows) spans was slow (it took ~2 seconds the render the table). So I either make ngFor faster or try to make the styles work.

Answer 1

Angular use encapsulation for styles. See https://angular.io/guide/component-styles#view-encapsulation. You can use one of the way:

1. use ::ng-deep in your stiles like this: ::ng-deep span.add {...}
2. change encapsulation to None by adding encapsulation: ViewEncapsulation.None in @Component decorator.