How to create a mat-table with a checkbox and a label in the same column?

Question

I'm using Angular Material and I would like my first column to have a checkbox as well as the value of my name-property. I dont need this column to be sticky. I appreciate any ideas for this.

Under the following link you can find my stackblitz example: https://stackblitz.com/edit/angular-mat-table-checkbox-select-all-lbspiz?file=main.ts

I have tried to add a row span which did not work out.

Answer 1

First of all I made a working example on stackblitz:

Stackblitz-Example

I basically made the following changes to bring select and name in the same column:

The modified part of the TS-File:

displayedColumns: string[] = ['selectAndName', 'position', 'weight', 'symbol'];

The modified part of the HTML-File:

<ng-container matColumnDef="selectAndName">
  <th mat-header-cell *matHeaderCellDef>
    <mat-checkbox
      (change)="$event ? masterToggle() : null"
      [checked]="selection.hasValue() && isAllSelected()"
      [indeterminate]="selection.hasValue() && !isAllSelected()"
    >
    </mat-checkbox>
    Select and name
  </th>
  <td mat-cell *matCellDef="let element">
    <mat-checkbox
      (click)="$event.stopPropagation()"
      (change)="$event ? selection.toggle(element) : null"
      [checked]="selection.isSelected(element)"
    >
    </mat-checkbox>
    {{element.name}}
  </td>
</ng-container>