@some-angular-utils/modal

---

NPM

---

DEMO

This repo ships with an interactive showcase app — every feature has a live, editable example (edit the code, open the dialog). Run it locally:

npm install
npm run dev

Then open http://localhost:4200.

IMPORT

import { SAUModalService } from '@some-angular-utils/modal';

The library doesn't ship a dialog component — open() takes any component of your own (standalone, injecting ModalRef if it needs to close/dismiss itself):

import { Component, Input, inject } from '@angular/core';
import { ModalRef } from '@some-angular-utils/modal';

@Component({ selector: 'app-confirm-dialog', template: `...` })
export class ConfirmDialogComponent {
  @Input() name = '';
  @Input() entity = 'item';

  private modalRef = inject<ModalRef<ConfirmDialogComponent>>(ModalRef);

  confirm(): void { this.modalRef.close(true); }
  cancel(): void { this.modalRef.dismiss(false); }
}

TYPESCRIPT

private sauModalService = inject(SAUModalService);

deleteCompany(company: Company) {
  const modalRef = this.sauModalService.open(ConfirmDialogComponent, {});
  modalRef.componentInstance.name = company.name;
  modalRef.componentInstance.entity = 'Company';

  modalRef.result.then(
    () => this.removeFromList(company.id), // confirmed
    () => {},                              // cancelled
  );
}

OPTIONS

this.sauModalService.open(ConfirmDialogComponent, {
  size: 'lg',        // 'sm' | 'md' | 'lg', defaults to 'md'
  backdrop: 'static', // true | false | 'static' — 'static' keeps it open on outside click
  keyboard: false,    // whether Escape dismisses it, defaults to true
});

COLORS

sau-modal {
    --sau-color-primary: rgb(147, 51, 234);
    --sau-color-background: rgb(255, 255, 255);
    --sau-color-text: rgb(31, 41, 55);
}

These custom properties cascade from <sau-modal> down into whatever component you open, so your own component's styles can reference them too (e.g. var(--sau-color-background, #fff)).