{"id":51377223,"url":"https://github.com/HoplaGeiss/ngx-dialog-forge","last_synced_at":"2026-07-05T21:00:33.981Z","repository":{"id":367503635,"uuid":"1281045632","full_name":"HoplaGeiss/ngx-dialog-forge","owner":"HoplaGeiss","description":"Declarative, signals-native Angular dialog library built on the native \u003cdialog\u003e element — zero dependencies, CSS-only theming, fully accessible.","archived":false,"fork":false,"pushed_at":"2026-06-26T08:18:03.000Z","size":187,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-26T10:04:51.209Z","etag":null,"topics":["angular","dialog","modal","native-dialog","signals","typescript"],"latest_commit_sha":null,"homepage":"https://hoplageiss.github.io/ngx-dialog-forge/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HoplaGeiss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-26T07:15:35.000Z","updated_at":"2026-06-26T08:18:06.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/HoplaGeiss/ngx-dialog-forge","commit_stats":null,"previous_names":["hoplageiss/ngx-dialog-forge"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/HoplaGeiss/ngx-dialog-forge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HoplaGeiss%2Fngx-dialog-forge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HoplaGeiss%2Fngx-dialog-forge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HoplaGeiss%2Fngx-dialog-forge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HoplaGeiss%2Fngx-dialog-forge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HoplaGeiss","download_url":"https://codeload.github.com/HoplaGeiss/ngx-dialog-forge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HoplaGeiss%2Fngx-dialog-forge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35168795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-05T02:00:06.290Z","response_time":100,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","dialog","modal","native-dialog","signals","typescript"],"created_at":"2026-07-03T14:00:27.946Z","updated_at":"2026-07-05T21:00:33.974Z","avatar_url":"https://github.com/HoplaGeiss.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Modals"],"readme":"# ngx-dialog-forge\n\nA declarative, signals-native Angular dialog library built on the native `\u003cdialog\u003e` element.\n\n[![CI](https://github.com/HoplaGeiss/ngx-dialog-forge/actions/workflows/ci.yml/badge.svg)](https://github.com/HoplaGeiss/ngx-dialog-forge/actions/workflows/ci.yml)\n[![npm](https://img.shields.io/npm/v/ngx-dialog-forge)](https://www.npmjs.com/package/ngx-dialog-forge)\n[![license](https://img.shields.io/badge/license-MIT-blue)](LICENSE)\n\n**[Live demo →](https://hoplageiss.github.io/ngx-dialog-forge/)**\n\n---\n\n## Features\n\n- **Declarative API** — place `\u003cngx-dialog\u003e` directly in your template, no service calls\n- **Signals-first** — two-way binding via `model()`, `input()`, `output()` throughout; OnPush everywhere\n- **Native `\u003cdialog\u003e` element** — free focus trapping, backdrop, and `inert` management from the browser\n- **Zero runtime dependencies** — no CDK, no third-party packages\n- **Flexible actions** — declarative slot (`ng-template ngxDialogActions`) or shorthand `[actions]` input\n- **CSS-only theming** — three ready-made themes (Material, Bootstrap, PrimeNG) activated via a single `data-ngx-theme` attribute; no Angular input required\n- **Per-instance overrides** — `closeButton`, `closeOnBackdrop`, `closeOnEscape`, and `size` can all be overridden per dialog\n- **Global config** — set defaults once with `provideDialog()` in `app.config.ts`\n- **SSR-compatible** — all DOM calls are guarded with `isPlatformBrowser`\n\n---\n\n## Requirements\n\n- Angular **22+**\n\n---\n\n## Installation\n\n```bash\npnpm add ngx-dialog-forge\n# or\nnpm install ngx-dialog-forge\n```\n\n---\n\n## Setup\n\n### 1. Register global defaults (optional)\n\n```ts\n// app.config.ts\nimport { provideDialog } from 'ngx-dialog-forge';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideDialog({\n      closeButton: true,\n      closeOnBackdrop: true,\n      closeOnEscape: true,\n    }),\n  ],\n};\n```\n\n### 2. Load a theme\n\nImport one of the provided SCSS partials in your global stylesheet and set `data-ngx-theme` on an ancestor element (typically `\u003cbody\u003e`):\n\n```scss\n// styles.scss\n@use 'ngx-dialog-forge/themes/material';\n@use 'ngx-dialog-forge/themes/bootstrap';\n@use 'ngx-dialog-forge/themes/primeng';\n```\n\n```html\n\u003cbody data-ngx-theme=\"material\"\u003e...\u003c/body\u003e\n```\n\nSwitching the attribute value at runtime changes the active theme instantly — no JavaScript style injection required.\n\n---\n\n## Usage\n\n### Basic dialog\n\n```ts\nimport { NgxDialogComponent } from 'ngx-dialog-forge';\n\n@Component({\n  imports: [NgxDialogComponent],\n  template: `\n    \u003cbutton (click)=\"open.set(true)\"\u003eOpen\u003c/button\u003e\n\n    \u003cngx-dialog [(open)]=\"open\" title=\"Hello\"\u003e\n      \u003cp\u003eDialog body content.\u003c/p\u003e\n    \u003c/ngx-dialog\u003e\n  `,\n})\nexport class MyComponent {\n  open = signal(false);\n}\n```\n\n---\n\n### Declarative actions slot\n\nUse `ng-template ngxDialogActions` with `ngxDialogCancel` / `ngxDialogConfirm` marker directives. The dialog closes and emits through `(action)` automatically when either is clicked.\n\n```ts\nimport {\n  NgxDialogComponent,\n  NgxDialogActionsDirective,\n  NgxDialogCancelDirective,\n  NgxDialogConfirmDirective,\n} from 'ngx-dialog-forge';\n\n@Component({\n  imports: [NgxDialogComponent, NgxDialogActionsDirective, NgxDialogCancelDirective, NgxDialogConfirmDirective],\n  template: `\n    \u003cngx-dialog [(open)]=\"open\" title=\"Delete item?\" (action)=\"onAction($event)\"\u003e\n      \u003cp\u003eThis action cannot be undone.\u003c/p\u003e\n\n      \u003cng-template ngxDialogActions\u003e\n        \u003cbutton type=\"button\" ngxDialogCancel\u003eCancel\u003c/button\u003e\n        \u003cbutton type=\"button\" ngxDialogConfirm\u003eDelete\u003c/button\u003e\n      \u003c/ng-template\u003e\n    \u003c/ngx-dialog\u003e\n  `,\n})\nexport class MyComponent {\n  open = signal(false);\n\n  onAction(type: string): void {\n    console.log(type); // 'confirm' | 'cancel'\n  }\n}\n```\n\n---\n\n### Actions via `[actions]` input\n\nShorthand for simple confirm / cancel flows without a template slot:\n\n```html\n\u003cngx-dialog\n  [(open)]=\"open\"\n  title=\"Confirm\"\n  [actions]=\"[{ label: 'Cancel', type: 'cancel' }, { label: 'OK', type: 'confirm' }]\"\n  (action)=\"onAction($event)\"\u003e\n  \u003cp\u003eAre you sure?\u003c/p\u003e\n\u003c/ngx-dialog\u003e\n```\n\n---\n\n### Per-instance overrides\n\nEvery option from `provideDialog()` can be overridden per dialog:\n\n```html\n\u003cngx-dialog\n  [(open)]=\"open\"\n  title=\"Important\"\n  [closeOnBackdrop]=\"false\"\n  [closeOnEscape]=\"false\"\n  [closeButton]=\"true\"\n  size=\"sm\"\u003e\n  \u003cp\u003eOnly the X button closes this.\u003c/p\u003e\n\u003c/ngx-dialog\u003e\n```\n\n---\n\n## `NgxDialogComponent` API\n\n### Inputs\n\n| Input | Type | Default | Description |\n|---|---|---|---|\n| `open` | `model\u003cboolean\u003e` | `false` | Two-way binding for the open state |\n| `title` | `string` | — | Dialog heading text |\n| `closeButton` | `boolean` | from config / `true` | Show the × close button in the header |\n| `closeOnBackdrop` | `boolean` | from config / `true` | Close when the backdrop is clicked |\n| `closeOnEscape` | `boolean` | from config / `true` | Close on the Escape key |\n| `size` | `'sm' \\| 'md' \\| 'lg' \\| 'xl'` | `'md'` | Max-width preset |\n| `actions` | `NgxDialogAction[]` | `[]` | Shorthand action buttons (alternative to the slot) |\n\n### Outputs\n\n| Output | Payload | Description |\n|---|---|---|\n| `action` | `string` | Emits the action `type` when a button is clicked (`'confirm'`, `'cancel'`, or custom) |\n| `opened` | `void` | Fires after `showModal()` is called |\n| `closed` | `void` | Fires after the dialog closes (any cause) |\n\n---\n\n## Directives\n\n| Selector | Description |\n|---|---|\n| `ng-template[ngxDialogActions]` | Marks an `ng-template` as the actions slot |\n| `[ngxDialogConfirm]` | Marks a button as the confirm action — emits `'confirm'` and closes the dialog on click |\n| `[ngxDialogCancel]` | Marks a button as the cancel action — emits `'cancel'` and closes the dialog on click |\n\n---\n\n## `provideDialog()` options\n\n```ts\ninterface NgxDialogConfig {\n  closeButton?: boolean;      // default: true\n  closeOnBackdrop?: boolean;  // default: true\n  closeOnEscape?: boolean;    // default: true\n}\n```\n\n---\n\n## CSS custom properties\n\nOverride any of these on `dialog.ngx-dialog` (or a parent) to customise the look without writing a full theme.\n\n| Property | Default | Description |\n|---|---|---|\n| `--ngx-dialog-bg` | `#ffffff` | Dialog background |\n| `--ngx-dialog-border` | `none` | Dialog outline border |\n| `--ngx-dialog-border-radius` | `8px` | Corner radius |\n| `--ngx-dialog-shadow` | medium drop shadow | Box shadow |\n| `--ngx-dialog-border-color` | `rgba(0,0,0,.08)` | Header / footer divider colour |\n| `--ngx-dialog-backdrop-color` | `rgba(0,0,0,.5)` | `::backdrop` colour |\n| `--ngx-dialog-padding` | `1.25rem 1.5rem` | Fallback padding for header and body |\n| `--ngx-dialog-header-bg` | `transparent` | Header background |\n| `--ngx-dialog-header-padding` | inherits `--ngx-dialog-padding` | Header padding |\n| `--ngx-dialog-title-color` | `inherit` | Title text colour |\n| `--ngx-dialog-title-size` | `1.125rem` | Title font size |\n| `--ngx-dialog-title-weight` | `600` | Title font weight |\n| `--ngx-dialog-body-padding` | inherits `--ngx-dialog-padding` | Body padding |\n| `--ngx-dialog-body-color` | `inherit` | Body text colour |\n| `--ngx-dialog-footer-bg` | `transparent` | Footer background |\n| `--ngx-dialog-footer-padding` | `1rem 1.5rem` | Footer padding |\n| `--ngx-dialog-confirm-bg` | `#3b82f6` | Confirm button background |\n| `--ngx-dialog-confirm-color` | `#ffffff` | Confirm button text |\n| `--ngx-dialog-confirm-border` | matches bg | Confirm button border |\n| `--ngx-dialog-confirm-shadow` | `none` | Confirm button box-shadow |\n| `--ngx-dialog-cancel-bg` | `transparent` | Cancel button background |\n| `--ngx-dialog-cancel-color` | `#374151` | Cancel button text |\n| `--ngx-dialog-cancel-border` | `#d1d5db` | Cancel button border |\n| `--ngx-dialog-btn-radius` | `6px` | Button corner radius |\n| `--ngx-dialog-btn-padding` | `0.5rem 1.25rem` | Button padding |\n| `--ngx-dialog-btn-font-size` | `0.875rem` | Button font size |\n| `--ngx-dialog-btn-font-weight` | `500` | Button font weight |\n| `--ngx-dialog-btn-letter-spacing` | `normal` | Button letter spacing |\n| `--ngx-dialog-close-btn-color` | `#6b7280` | × button colour |\n| `--ngx-dialog-close-btn-radius` | `4px` | × button corner radius |\n| `--ngx-dialog-close-btn-hover-bg` | `rgba(0,0,0,.06)` | × button hover background |\n| `--ngx-dialog-close-btn-hover-color` | `#111827` | × button hover colour |\n| `--ngx-dialog-focus-ring` | `#3b82f6` | Focus outline colour |\n| `--ngx-dialog-width-sm` | `360px` | Width for `size=\"sm\"` |\n| `--ngx-dialog-width-md` | `540px` | Width for `size=\"md\"` |\n| `--ngx-dialog-width-lg` | `720px` | Width for `size=\"lg\"` |\n| `--ngx-dialog-width-xl` | `960px` | Width for `size=\"xl\"` |\n\n---\n\n## Contributing\n\nPull requests are welcome. For significant changes please open an issue first.\n\n```bash\ngit clone https://github.com/HoplaGeiss/ngx-dialog-forge.git\ncd ngx-dialog-forge\npnpm install\npnpm start   # starts the demo app at localhost:4200\n```\n\n---\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHoplaGeiss%2Fngx-dialog-forge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FHoplaGeiss%2Fngx-dialog-forge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FHoplaGeiss%2Fngx-dialog-forge/lists"}