Issue
I have a component that renders mat-table in it's template. I want to pre-select some of the rows. The SelectionModel I have contains objects representing each selected item (not simple strings or numbers) and the method for comparing these is more complex than the native SelectionModel's method.
If this was a mat-select form control, I could use the [compareWith] directive to supply a custom comparison function e.g.
<mat-select [compareWith]="myCompareFunction" >...
but this is not suitable solution - as I need a tabular presentation. I an following closely the example in the Angular documents. The mat-table examples here: have a mat-table with selection checkbox on each row and this is the approach I have followed.
In the example's Component code it uses a SelectionModel object.
import {SelectionModel} from '@angular/cdk/collections';
....
....
selection = new SelectionModel<PeriodicElement>(true, []);
I am searching for a way to supply a custom comparison function to the SelectionModel object. Can SelectionModel be sub-classed with an override for the function or can a method be 'injected' in some way?
I have tried to sub-class SelectionModel and declare a new compareWith function, but this doesn't seem to be what's required. Can anyone advise?
import { SelectionModel } from '@angular/cdk/collections';
import { InputOptionIf } from '../formosa-interfaces/dynamic-field-config-if';
export class ModalSelectSelectionModel extends SelectionModel<InputOptionIf>{
compareWith(o1:any,o2:any) {
console.log("ModalSelectSelectionModel.compareWith()")
return( <InputOptionIf>o1.label==<InputOptionIf>o2.label);
}
}
Solution
As of Angular 14, SelectionModel now supports custom compareWith function. https://material.angular.io/cdk/collections/api#SelectionModel https://vscode.dev/github/angular/components/blob/a310fefb907cf88f38f46e0614289a4b057e8af0/src/cdk/collections/selection-model.ts#L43
interface IFoo {
id: string;
bar: string;
}
selectionModel = new SelectionModel<IFoo>(
true,
[],
true,
(c1: IFoo , c2: IFoo ) => c1.id === c2.id
);
Answered By - IdontwearString
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.