Sunday, 16 December 2018

Angular Material mat-table define reusable column in component

Anybody know if it is possible to create a “column” component for use with mat-table, I have tried creating a component for a commonly used column definition but when adding to the table i get an error that was unable to find the column selector, my column definition is below:

@Component({
  selector: 'iam-select-column',
  template: `
  <ng-container matColumnDef="select">
    <mat-header-cell *matHeaderCellDef>
      <mat-checkbox></mat-checkbox>
    </mat-header-cell>
    <mat-cell *matCellDef="let row">
      <mat-checkbox></mat-checkbox>
    </mat-cell>
  </ng-container>
  `,
  styles: [`
  `]
})
export class SelectColumnComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

and using this in the table

<mat-table class="mat-elevation-z8">

  <iam-select-column></iam-select-column>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>

and the displayedColumns are:

  displayedColumns = [
    'select'
  ];

Is it possible to do this as I would like to avoid the duplication in tables where I have a select column?



from Angular Material mat-table define reusable column in component

No comments:

Post a Comment