What causes "CdkSelectAll: missing CdkSelection in the parent" in angular/components?

Wrap the select-all in a CdkSelection: Select all .

angular/components · error · Error

CdkSelectAll: missing CdkSelection in the parent

Error message

CdkSelectAll: missing CdkSelection in the parent

What it means

CdkSelectAll must live inside a CdkSelection parent (or be bound to one), from which it injects the selection state. During ngOnInit, _assertValidParentSelection throws this dev-mode error when the parent CdkSelection could not be resolved, meaning cdk-select-all was used without cdk-selection. A second check on the same line ensures multiple-selection is enabled before the 'multiple' error fires.

Source

Thrown at src/cdk-experimental/selection/select-all.ts:100

    this._configureControlValueAccessor();
  }

  private _configureControlValueAccessor() {
    if (this._controlValueAccessor && this._controlValueAccessor.length) {
      this._controlValueAccessor[0].registerOnChange((e: unknown) => {
        if (e === true || e === false) {
          this.toggle();
        }
      });
      this.checked.pipe(takeUntil(this._destroyed)).subscribe(state => {
        this._controlValueAccessor![0].writeValue(state);
      });
    }
  }

  private _assertValidParentSelection() {
    if (!this._selection && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('CdkSelectAll: missing CdkSelection in the parent');
    }

    if (!this._selection.multiple && (typeof ngDevMode === 'undefined' || ngDevMode)) {
      throw Error('CdkSelectAll: CdkSelection must have cdkSelectionMultiple set to true');
    }
  }

  ngOnDestroy() {
    this._destroyed.next();
    this._destroyed.complete();
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

Wrap the select-all in a CdkSelection: <cdk-selection [multiple]="true"> <cdk-select-all>Select all</cdk-select-all> </cdk-selection>.
If select-all lives in a separate component, move it inside the cdk-selection template so the content/parent injection resolves.
Verify the template hierarchy — cdk-select-all must be a descendant (content-projected or nested) of cdk-selection.

Example fix

// before
<cdk-select-all>Select all</cdk-select-all>
// after
<cdk-selection [multiple]="true">
  <cdk-select-all>Select all</cdk-select-all>
</cdk-selection>

Defensive patterns

Strategy: validation

Validate before calling

const sel = document.querySelector('cdk-selection');
if (!sel || !sel.querySelector('cdk-select-all')) {
  // cdk-select-all is not inside a cdk-selection
}

Try / catch

ngAfterViewInit() {
  if (!this.parentElement.closest('cdk-selection')) {
    throw new Error('cdk-select-all requires a cdk-selection parent');
  }
}

Prevention

Always template cdk-select-all inside cdk-selection.
Keep select-all and selection list markup in the same component template.
Use an editor snippet/partial that emits the full cdk-selection wrapper.

When it happens

Trigger: Placing <cdk-select-all> outside any <cdk-selection> component so the injected parent (_selection) is undefined when ngOnInit runs.

Common situations: Copying a select-all checkbox into a standalone component/template without the selection wrapper; conditional rendering that removes the cdk-selection ancestor; misunderstanding that cdk-select-all requires cdk-selection as parent.

Related errors

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/6c55ac85c3948c03. Report an issue: GitHub.