sheet

Extends the Dialog component to display content that complements the main content of the screen.

PreviousNext
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';

import { ZardButtonComponent } from '@/shared/components/button';
import { ZardInputComponent } from '@/shared/components/input';
import { ZardSheetImports } from '@/shared/components/sheet/sheet.imports';
import { ZardSheetService } from '@/shared/components/sheet/sheet.service';

@Component({
  selector: 'z-demo-sheet-preview-form',
  imports: [FormsModule, ReactiveFormsModule, ZardInputComponent],
  template: `
    <form [formGroup]="form" class="grid flex-1 auto-rows-min gap-6 px-4">
      <div class="grid gap-3">
        <label for="sheet-demo-name" class="text-sm leading-none font-medium select-none">Name</label>
        <input z-input id="sheet-demo-name" formControlName="name" />
      </div>

      <div class="grid gap-3">
        <label for="sheet-demo-username" class="text-sm leading-none font-medium select-none">Username</label>
        <input z-input id="sheet-demo-username" formControlName="username" />
      </div>
    </form>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  exportAs: 'zardDemoSheetPreviewForm',
})
export class ZardDemoSheetPreviewFormComponent {
  form = new FormGroup({
    name: new FormControl('Pedro Duarte'),
    username: new FormControl('@peduarte'),
  });
}

@Component({
  imports: [ZardButtonComponent, ZardSheetImports],
  template: `
    <button type="button" z-button zType="outline" (click)="openSheet()">Open</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSheetPreviewComponent {
  private readonly sheetService = inject(ZardSheetService);

  openSheet() {
    this.sheetService.create({
      zTitle: 'Edit profile',
      zDescription: `Make changes to your profile here. Click save when you're done.`,
      zContent: ZardDemoSheetPreviewFormComponent,
      zOkText: 'Save changes',
      zCancelText: 'Close',
      zOnOk: instance => {
        console.log('Form submitted:', instance.form.value);
      },
    });
  }
}

Installation

Copy
npx zard-cli@latest add sheet

Usage

import { ZardSheetService } from '@/shared/components/sheet/sheet.service';
Copy
<button type="button" z-button zType="outline" (click)="openSheet()">Open</button>
Copy

Examples

side

Use the zSide option to set the edge of the screen where the sheet appears. Values are top, right, bottom, or left.
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';

import { ZardButtonComponent } from '@/shared/components/button';
import { ZardSheetService } from '@/shared/components/sheet/sheet.service';
import type { ZardSheetVariants } from '@/shared/components/sheet/sheet.variants';

type SheetSide = NonNullable<ZardSheetVariants['zSide']>;

const PARAGRAPHS = Array.from({ length: 10 }).map(
  () =>
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
);

@Component({
  selector: 'z-demo-sheet-side-content',
  template: `
    @for (paragraph of paragraphs; track $index) {
      <p class="mb-2 leading-relaxed">{{ paragraph }}</p>
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'no-scrollbar min-h-0 overflow-y-auto px-4' },
})
export class ZardDemoSheetSideContentComponent {
  protected readonly paragraphs = PARAGRAPHS;
}

@Component({
  imports: [ZardButtonComponent],
  template: `
    <div class="flex flex-wrap gap-2">
      @for (side of sides; track side) {
        <button type="button" z-button zType="outline" class="capitalize" (click)="openSheet(side)">{{ side }}</button>
      }
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSheetSideComponent {
  private readonly sheetService = inject(ZardSheetService);

  protected readonly sides = ['top', 'right', 'bottom', 'left'] as const satisfies readonly SheetSide[];

  openSheet(side: SheetSide) {
    this.sheetService.create({
      zTitle: 'Edit profile',
      zDescription: `Make changes to your profile here. Click save when you're done.`,
      zContent: ZardDemoSheetSideContentComponent,
      zSide: side,
      // Horizontal sheets already fill the viewport height; cap the vertical ones so the
      // content scrolls instead of pushing the footer off-screen.
      zCustomClasses: side === 'top' || side === 'bottom' ? 'max-h-[50vh]' : undefined,
      zOkText: 'Save changes',
      zCancelText: 'Cancel',
    });
  }
}

no close button

Use zClosable: false to hide the close button.
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';

import { ZardButtonComponent } from '@/shared/components/button';
import { ZardSheetService } from '@/shared/components/sheet/sheet.service';

@Component({
  selector: 'z-demo-sheet-no-close-button',
  imports: [ZardButtonComponent],
  template: `
    <button type="button" z-button zType="outline" (click)="openSheet()">Open Sheet</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ZardDemoSheetNoCloseButtonComponent {
  private readonly sheetService = inject(ZardSheetService);

  openSheet() {
    this.sheetService.create({
      zTitle: 'No Close Button',
      zDescription: "This sheet doesn't have a close button in the top-right corner. Click outside to close.",
      zClosable: false,
      zHideFooter: true,
    });
  }
}

API Reference

ZardSheetOptionsComponent

Configuration options for creating and managing sheet overlays.

PropertyDescriptionTypeDefault
[zTitle] Sheet title text or template string | TemplateRef<T> -
[zDescription] Sheet description/body text string -
[zContent] Custom content component, template, or HTML string | TemplateRef<T> | Type<T> -
[zSide] Edge of the screen where the sheet appears 'top' | 'right' | 'bottom' | 'left' 'right'
[zSize] Preset size for the sheet, relative to its side 'default' | 'sm' | 'lg' 'default'
[zWidth] Custom width (e.g., '400px', '50%') string -
[zHeight] Custom height (e.g., '80vh', '500px') string -
[zDuration] Exit animation duration in ms number 200
[zOkText] OK button text, null to hide button string | null 'OK'
[zCancelText] Cancel button text, null to hide button string | null 'Cancel'
[zOkIcon] OK button icon — registered icon name or inline SVG string string -
[zCancelIcon] Cancel button icon — registered icon name or inline SVG string string -
[zOkDestructive] Whether OK button should have destructive styling boolean false
[zOkDisabled] Whether OK button should be disabled boolean false
[zHideFooter] Whether to hide the footer with action buttons boolean false
[zMaskClosable] Whether clicking outside closes the sheet boolean true
[zClosable] Whether to show the close button boolean true
[zCustomClasses] Additional CSS classes to apply ClassValue -
[zOnOk] OK button click handler EventEmitter<T> | OnClickCallback<T> -
[zOnCancel] Cancel button click handler EventEmitter<T> | OnClickCallback<T> -
[zData] Data to pass to custom content components object -
[zViewContainerRef] View container for rendering custom content ViewContainerRef -

ZardSheetRefComponent

Reference returned by `ZardSheetService.create()`, used to observe and close the sheet.

PropertyDescriptionTypeDefault
[close] Closes the sheet, optionally with a result (result?: R) => void -
[isClosing] Signal that turns true once the sheet starts closing Signal<boolean> false
[result] Signal holding the result passed to close() Signal<R | undefined> undefined
[componentInstance] Signal with the instance of the component rendered as content Signal<T | null> null

ZardSheetComponentComponent

Sheet overlay component outputs.

PropertyDescriptionTypeDefault
(okTriggered) Emitted when OK button is clicked EventEmitter<void> -
(cancelTriggered) Emitted when Cancel button is clicked EventEmitter<void> -
github iconwhatsapp icondiscord iconX icon

Made with ❤ in Brazil. Open source and available on GitHub .