cssangularangular-material-tablemat-select

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


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.


Solution

  • 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>