### File

`src/lib/select-row/checkbox-header-cell/checkbox-header-cell.component.ts`

### Implements

`OnInit`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
selector | `th[rxap-checkbox-header-cell]`
standalone | `true`
imports | `NgIf` `MatCheckboxModule` `AsyncPipe`
styleUrls | `./checkbox-header-cell.component.scss`
templateUrl | `./checkbox-header-cell.component.html`

### Index

###### Properties

- Public checked$
- Public indeterminate$
- Public isMultipleSelection

###### Methods

- Public onChange

### Constructor

`constructor(cdkTable: CdkTable, selectRow: SelectRowService<Data>)`
Defined in src/lib/select-row/checkbox-header-cell/checkbox-header-cell.component.ts:39

Parameters :

Name | Type | Optional
cdkTable | `CdkTable<Data>` | No
selectRow | `SelectRowService<Data>` | No

### Methods

Public onChange
`onChange($event: MatCheckboxChange)`
Defined in src/lib/select-row/checkbox-header-cell/checkbox-header-cell.component.ts:67

Parameters :

Name | Type | Optional
$event | `MatCheckboxChange` | No

Returns : `void`

### Properties

Public checked$
Type : `Observable<boolean>`
Default value : `EMPTY`
Defined in src/lib/select-row/checkbox-header-cell/checkbox-header-cell.component.ts:37

Public indeterminate$
Type : `Observable<boolean>`
Default value : `EMPTY`
Defined in src/lib/select-row/checkbox-header-cell/checkbox-header-cell.component.ts:36

Public isMultipleSelection
Default value : `false`
Defined in src/lib/select-row/checkbox-header-cell/checkbox-header-cell.component.ts:39

    import {
      ChangeDetectionStrategy,
      Component,
      Inject,
      OnInit,
    } from '@angular/core';
    import { SelectRowService } from '../select-row.service';
    import type { Observable } from 'rxjs';
    import { EMPTY } from 'rxjs';
    import { map } from 'rxjs/operators';
    import {
      MatCheckboxChange,
      MatCheckboxModule,
    } from '@angular/material/checkbox';
    import { CdkTable } from '@angular/cdk/table';
    import {
      AsyncPipe,
      NgIf,
    } from '@angular/common';

    @Component({
      // eslint-disable-next-line @angular-eslint/component-selector
      selector: 'th[rxap-checkbox-header-cell]',
      templateUrl: './checkbox-header-cell.component.html',
      styleUrls: [ './checkbox-header-cell.component.scss' ],
      changeDetection: ChangeDetectionStrategy.OnPush,
      standalone: true,
      imports: [
        NgIf,
        MatCheckboxModule,
        AsyncPipe,
      ],
    })
    export class CheckboxHeaderCellComponent<Data extends Record<string, any>>
      implements OnInit {
      public indeterminate$: Observable<boolean> = EMPTY;
      public checked$: Observable<boolean> = EMPTY;

      public isMultipleSelection = false;

      constructor(
        @Inject(CdkTable)
        private readonly cdkTable: CdkTable<Data>,
        private readonly selectRow: SelectRowService<Data>,
      ) {
        this.isMultipleSelection =
          this.selectRow.selectionModel.isMultipleSelection();
      }

      public ngOnInit() {
        this.indeterminate$ = this.selectRow.selectedRows$.pipe(
          map(
            (selectedRows) =>
              !!selectedRows.length &&
              this.cdkTable['_data'].length !== selectedRows.length,
          ),
        );
        this.checked$ = this.selectRow.selectedRows$.pipe(
          map(
            (selectedRows) =>
              !!selectedRows.length &&
              this.cdkTable['_data'].length === selectedRows.length,
          ),
        );
      }

      public onChange($event: MatCheckboxChange) {
        if ($event.checked) {
          this.selectRow.selectionModel.select(...this.cdkTable['_data']);
        } else {
          this.selectRow.selectionModel.clear();
        }
      }
    }

    <mat-checkbox
      (change)="onChange($event)"
      *ngIf="isMultipleSelection"
      [checked]="(checked$ | async) ?? false"
      [indeterminate]="indeterminate$ | async">
    </mat-checkbox>

`./checkbox-header-cell.component.scss`

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""