To sort an array of objects by a checkbox selection in a column using a custom pipe in Angular, you can modify the checkbox-selection.pipe.ts file as follow

Custom Pipe (checkbox-selection.pipe.ts)

To generate pipe, use the following comment.

ng g p CheckboxSelectionPipe

CheckboxSelectionPipe - use your custom pipe name instead of [checkboxslectionpipe]

In Pipe declaration, we can define the filter's name (pipe); when the pipe is true, the pipe is pure, meaning that the transform() method is invoked only when its input arguments change. Pipes are pure by default.

In the transform() method, we can pass the array which needs to be filtered.

Code Explanation

Here I have used the spread operator (...) that will allow us to quickly copy all or part of an existing array or object into another array or object.

While returning, it will merge Selected and unselected items.

@Pipe({
  name: 'orderByCheckboxSelection',
  pure:false

})
export class CheckboxSelectionPipe implements PipeTransform {

  transform(list: any): any {
    if (!list) {
      return [];
    }

    // Sort the items based on whether they are selected or not
    let selectedItems = list.filter(item => item.selected);
    let unselectedItems = list.filter(item => !item.selected);

    return [...selectedItems, ...unselectedItems];
  }

}

App.Module.ts for a particular module

Register the custom pipe in the module where you want to use it. For example, open the app.module.ts file and import and add CheckboxSelectionPipe to the declarations array.

@NgModule({
  declarations: [....,....],
  imports: [
    CheckboxSelectionPipe
  ],
  providers: [ ....]

App.Component.html

By providing the CheckBoxSelection pipe to the array needed to sort, you can sort the array based on that property's checkbox selection.

<div *ngFor="let date of collection | orderByCheckboxSelection ">
 ....
....
</div>