Angular v21 (Material/CDK v21) Compatibility Issue – Overlay/Popover Top Layer Conflict

[anaseldaou]

Description

With Angular Material/CDK v21, overlays (including MatDialog) use the browser’s native Popover API (top layer) by default (usePopover: true).

When a mat-dialog is opened, it is rendered in the browser’s top layer, which is outside the normal DOM stacking context. Because of this, standard z-index rules no longer apply.

ngx-spinner renders its overlay as a regular fixed-position element appended to . As a result:

The spinner cannot appear above a MatDialog

Increasing z-index has no effect

The spinner remains visually behind the dialog

Root Cause

This behavior is caused by Angular CDK v21 introducing usePopover: true by default for overlays. Native popovers render in the browser’s top layer, which supersedes all normal stacking contexts.

Workaround

Applications can restore the previous behavior by disabling popovers globally:

import { OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';

providers: [
{
provide: OVERLAY_DEFAULT_CONFIG,
useValue: { usePopover: false }
}
];

After setting usePopover: false, ngx-spinner works as expected and z-index stacking behaves normally.