Dialog

Component wrapper for native <dialog> with Oat styling, focus management, and content projection.

APITypeDescription
showModal()methodShow as modal (with backdrop)
show()methodShow as non-modal
close(val?)methodClose the dialog, optional return value
isOpen()Signal<boolean>Current open state
(closed)stringFires with return value on close
[header]slotContent for dialog header
[footer]slotContent for dialog footer

Import & Usage

typescript
import { Component } from '@angular/core';
import { NgOatDialogComponent } from '@letsprogram/ng-oat';

@Component({
  selector: 'app-example',
  imports: [NgOatDialogComponent],
  template: `
    <button (click)="dialog.showModal()">Open Dialog</button>

    <ng-oat-dialog #dialog (closed)="onClose($event)">
      <h3 header>Confirm</h3>
      <p>Are you sure?</p>
      <div footer>
        <button class="outline" (click)="dialog.close('cancel')">Cancel</button>
        <button (click)="dialog.close('confirm')">OK</button>
      </div>
    </ng-oat-dialog>
  `,
})
export class ExampleComponent {
  onClose(result: string) {
    console.log('Dialog closed with:', result);
  }
}

Modal Dialog

Confirm Action

Are you sure you want to proceed? This action cannot be undone.

html
<button (click)="modal.showModal()">Open Modal</button>

<ng-oat-dialog #modal (closed)="onClose($event)">
  <h3 header>Confirm Action</h3>
  <p>Are you sure you want to proceed?</p>
  <div footer>
    <button class="outline" (click)="modal.close('cancel')">Cancel</button>
    <button (click)="modal.close('confirm')">Confirm</button>
  </div>
</ng-oat-dialog>

Non-Modal Dialog

Info

This dialog does not block interaction with the rest of the page.

html
<button class="outline" (click)="nonModal.show()">Open Non-Modal</button>

<ng-oat-dialog #nonModal>
  <h3 header>Info</h3>
  <p>Does not block page interaction.</p>
  <div footer>
    <button class="small outline" (click)="nonModal.close()">Close</button>
  </div>
</ng-oat-dialog>

Form Dialog

Feedback

html
<button (click)="formDlg.showModal()">Open Form Dialog</button>

<ng-oat-dialog #formDlg (closed)="onClose($event)">
  <h3 header>Feedback</h3>
  <label>
    Your feedback
    <textarea #feedback rows="3" placeholder="Type here…"></textarea>
  </label>
  <div footer>
    <button class="outline" (click)="formDlg.close()">Cancel</button>
    <button (click)="formDlg.close(feedback.value)">Submit</button>
  </div>
</ng-oat-dialog>

Event Log