@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: `...`})exportclassConfirmDialogComponent{
@Input()name='';
@Input()entity='item';privatemodalRef=inject<ModalRef<ConfirmDialogComponent>>(ModalRef);confirm(): void{this.modalRef.close(true);}cancel(): void{this.modalRef.dismiss(false);}}

TYPESCRIPT

privatesauModalService=inject(SAUModalService);deleteCompany(company: Company){constmodalRef=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 clickkeyboard: 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)).