Cdk Selection

[jelbourn]

Similar to matSort, this would involve creating a directive that captures selection state CdkSelection, directives for per-item toggles e.g. CdkSelectionToggle, as well as integrations specifically for CdkTable. For example, the cdk-table has cdk-text-column as a simple way to add text-only content to a table:

<table mat-table [dataSource]="dataSource">
  <mat-text-column name="employeeId"></mat-text-column>
  ...
</table>

We can do something similar for selection.

[klemenoslaj]

I was about to open an issue and ask for a contribution to it. Happy to find it in a good state already 🎉

---

@jelbourn sorry for mentioning you directly. I realize this is still experimental, but I did find two issues looking at the code:

• selection wouldn't work well with mat-paginator
• selection is connecting to DataSource directly

Selection with mat-paginator

Probably the selection state should be "page aware", as in:

• select all on page 1
• navigate to page 2
• "select all" checkbox in the header is still checked, yet all checkboxes of the second page are empty

I'd expect behavior as in Gmail - "select all" is un-checked too.

Connecting to DataSource

I expect it is better if CdkTable could expose the current data as an Observable so directives could make use of it (I already have multiple cases that could benefit).

That would mean CdkSelection directive could make use of the data stream and avoid connecting DataSource.
I think this is better because for connect we cannot make an assumption what kind of observable is returned, right?
So if it's cold Observable this could result in unwanted network requests as both CdkTable and CdkSelection are connecting to it.

components/src/cdk-experimental/selection/selection.ts

Line 99 in 2967ad0

dataStream = this._dataSource.connect(this);

components/src/cdk/table/table.ts

Line 946 in 2967ad0

dataStream = this.dataSource.connect(this);