hlm-sheet not working properly (Overlay not rendered / No transition)

[timsar2]

hlm-sheet does not work correctly in a standalone Angular application.

• Clicking the trigger does not render the sheet properly.
• <div class="cdk-overlay-container"> is not created when using HlmSheet.
• The sheet only works when using BrnSheet directly.
• Even when it opens, there is no transition animation (it appears instantly without smooth slide-in).

---

Environment

• Angular: 21.0.x
• @angular/cdk: 21.0.x
• "@spartan-ng/cli": "^0.0.1-alpha.575",
• "@spartan-ng/brain": "^0.0.1-alpha.575"
• Standalone bootstrap (no NgModules)

---

@component({
standalone: true,
imports: [HlmSheetImports],
template: `

Open

Are you absolutely sure?

This action cannot be undone. This will permanently delete your account and remove your data from our servers.

`,
})
export class TestComponent {}

In main.ts:

bootstrapApplication(AppComponent, {
providers: [
provideAnimations(),
],
})

---

Observed Behavior

1. hlm-sheet does not create cdk-overlay-container
2. Using BrnSheet works correctly
3. No slide transition animation
4. Providing animations via:

provideAnimations()

or

provideAnimationsAsync('animations')

does not restore transition behavior

---

Expected Behavior

• hlm-sheet should initialize CDK Overlay properly
• cdk-overlay-container should be created on trigger
• Sheet should slide in smoothly from the specified side
• Should work correctly in standalone Angular 20+ without relying on deprecated animation providers

---

Additional Notes

Both:

• provideAnimations()
• provideAnimationsAsync()

are deprecated in Angular 20.2 with intent to remove in v23.

Currently, hlm-sheet appears to depend on the legacy animation engine, and transition animations do not function properly even when the deprecated providers are added.

It seems there may be:

• A compatibility issue with Angular 20+
• A missing provider registration for CDK Overlay
• Or a mismatch between HlmSheet wrapper and BrnSheet implementation

---

Question

Is hlm-sheet fully compatible with Angular 20+ standalone setup?

Is there a recommended way to enable transitions without relying on deprecated animation providers?

---

[goetzrobin]

hello @timsar2 can you please create a reproduction so we can take a look

[softsurgery]

Fixing Overlay Background Opacity for Spartan Sheet (Angular CDK Overlay)

When using **Spartan NG Sheet with Angular CDK overlays, the overlay container (.cdk-overlay-container) may not apply background opacity correctly when the sheet opens.

This happens because the CDK overlay container is created dynamically, so styling it directly in CSS does not always produce the expected fade-in effect.

The workaround is to:

Add a default style to the overlay container.

Dynamically update opacity when the sheet opens/closes.

1. Utility functions

Create a utility file to control the overlay container styles.

export const applyOverlayStyles = () => {
  const overlayContainer = document.querySelector('.cdk-overlay-container') as HTMLElement;

  if (overlayContainer) {
    overlayContainer.style.opacity = '0.5';
  } else {
    console.warn('CDK overlay container not found');
  }
};

export const removeOverlayStyles = () => {
  const overlayContainer = document.querySelector('.cdk-overlay-container') as HTMLElement;

  if (overlayContainer) {
    overlayContainer.style.opacity = '0';
  }
};

2. Global styles

Add default styles to your global stylesheet.

.cdk-overlay-container {
  @apply bg-background opacity-0;
  transition: opacity 0.3s ease-in-out;
}

This ensures the overlay is hidden by default and smoothly fades in.

3. Apply styles in the Sheet component

Use Angular lifecycle hooks to apply/remove the styles.

import { Component, inject, AfterViewInit, OnDestroy, Signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { NgComponentOutlet } from '@angular/common';

import { BrnDialogRef, injectBrnDialogContext } from '@spartan-ng/brain/dialog';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmSheetImports } from '@spartan-ng/helm/sheet';

import { SheetContentBridgeDirective } from './sheet-content-bridge.directive';
import { SheetAction, SheetObject } from './types';

import { applyOverlayStyles, removeOverlayStyles } from '@/lib/overlay.lib';

@Component({
  selector: 'app-sheet',
  standalone: true,
  templateUrl: './sheet.component.html',
  styleUrl: './sheet.component.css',
  imports: [
    HlmSheetImports,
    HlmButtonImports,
    NgComponentOutlet,
    SheetContentBridgeDirective
  ],
})
export class SheetComponent implements AfterViewInit, OnDestroy {
  private readonly sheetRef = inject(BrnDialogRef);
  protected readonly context = injectBrnDialogContext<SheetObject>();

  protected readonly actions = this.context.actions ?? [];
  private readonly disabledSignals = new Map<SheetAction, Signal<boolean>>();

  ngAfterViewInit() {
    // Wait for overlay container to render
    setTimeout(() => {
      applyOverlayStyles();
    }, 10);
  }

  ngOnDestroy() {
    removeOverlayStyles();
  }

  protected isDisabled(action: SheetAction): boolean {
    if (!action.disabled) return false;

    let sig = this.disabledSignals.get(action);

    if (!sig) {
      sig = toSignal(action.disabled, { initialValue: false });
      this.disabledSignals.set(action, sig);
    }

    return sig();
  }

  close() {
    removeOverlayStyles();
    this.context.onHide?.();
    this.sheetRef.close();
  }

  onActionClick(action: SheetAction) {
    action.onClick();
  }
}

4. Sheet Service

The service simply opens the sheet with the appropriate options.

@Injectable({ providedIn: 'root' })
export class SheetService {
  constructor(private readonly brnDialog: BrnDialogService) {}

  open(viewContainerRef: ViewContainerRef, config: SheetObject) {
    const side = config.position ?? 'right';

    return this.brnDialog.open(SheetComponent, viewContainerRef, config, {
      closeOnBackdropClick: config.dismissable ?? true,
      disableClose: config.closeOnEscape === false,
      panelClass: [`sheet-side-${side}`],
    });
  }
}

Key Notes :

• setTimeout is necessary because Angular CDK renders the overlay container asynchronously.
• ngOnDestroy ensures the overlay opacity resets when the sheet closes.

This approach works for custom sheet implementations built on Spartan dialogs.