向 Angular Material 表中的列添加投影

Question

Is it possible to add a drop shadow to the 1st column of an Angular Material table?

I have tried a couple approaches with ::ng-deep or adding classes, but without much success.

Below is my basic code. The right border via the CSS shows in the table in the 1st column, but not the shadow. And the moment I start scrolling to the right, the border disappears (my 1st column is sticky).

I would like to add a drop shadow to the 1st column, that will not be removed on scrolling.

CSS

.column-shadow {
  border-right: 1px solid $af-pinkish-grey !important;
  box-shadow: 3px 3px 5px rgba(68, 68, 68, 0.6) !important;
}

HTML

<!-- action buttons -->
<ng-container matColumnDef="select" sticky>
  <th mat-header-cell *matHeaderCellDef>
    Action
  </th>
  <td
    [ngClass]="'column-shadow'"
    mat-cell
    *matCellDef="let row; let index = index"
  >
    <!-- Select record -->
    <mat-checkbox
      color="primary"
      (click)="$event.stopPropagation()"
      (change)="selectRecord($event.checked, index)"
      [checked]="selection.isSelected(row)"
      [aria-label]="checkboxLabel(row)"
    >
    </mat-checkbox>

    <span class="delete-edit-row">
      <!-- Delete single record -->
      <a
        class="action-button"
        mat-button
        (click)="deleteSingleRecord(index)"
        ><img
          class="close-button-image"
          src="../../../assets/images/trashgrid.svg"
      /></a>
    </span>
  </td>
</ng-container>

Answer 1

Edit

Your way of applying css seems correct. For me the only reason it doesn't apply the css could be

1. My old answer
2. Your css not being applied at all because of the shadow-dom

Shadow dom fix

Please, try adding your css in a global scope, for example in a styles.scss file that is imported in the root of your project.

If it works, you shall try the remove the shadow dome of your component by adding encapsulation: ViewEncapsulation.None to your @component directive.

Old

It seems like you aren't using [ngClass] properly. If you're trying to add a class, then do [class] and not [ngClass] .

this answer did explained the difference between the both but basically.

But you should change your code to this one.

 <td
    [class.column-shadow]="true"
    mat-cell
    *matCellDef="let row; let index = index"
  >
  <!-- Or -->
  <td
    class="column-shadow"
    mat-cell
    *matCellDef="let row; let index = index"
  >
  <!-- Or -->
  <td
    [ngClass]="{'column-shadow': true}"
    mat-cell
    *matCellDef="let row; let index = index"
  >

[ngClass]

NgClass should receive an object with class names as keys and expressions that evaluate to true or false. extra-sparkle is the key and isDelightful is the value (boolean).

<div [ngClass]="{'column-shadow': true}">

[class]

on the right that should evaluate to true or false to determine if the class should be applied.

<div [class.column-shadow]="true">

Additional tip

Do avoid using !important in your css since it is considering being a bad practice. If you have to, then please do add a comment ;)