{"id":28087589,"url":"https://github.com/ko1ebayev/ngx-zero-dialog","last_synced_at":"2026-01-12T02:23:01.738Z","repository":{"id":259300926,"uuid":"871381732","full_name":"ko1ebayev/ngx-zero-dialog","owner":"ko1ebayev","description":"Zero-dependency modal dialog for Angular 16+","archived":false,"fork":false,"pushed_at":"2024-11-20T14:27:43.000Z","size":42113,"stargazers_count":3,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-26T21:06:23.218Z","etag":null,"topics":["angular","dialog","modal","ngx-dialog","ngx-zero-dialog"],"latest_commit_sha":null,"homepage":"https://ko1ebayev.github.io/ngx-zero-dialog/","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/ko1ebayev.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2024-10-11T21:05:59.000Z","updated_at":"2024-11-20T14:27:23.000Z","dependencies_parsed_at":"2024-10-24T07:26:07.494Z","dependency_job_id":"4afee3dd-acc3-426b-ac4a-bf7310b5a9e4","html_url":"https://github.com/ko1ebayev/ngx-zero-dialog","commit_stats":null,"previous_names":["ko1ebayev/ngx-dialog","ko1ebayev/ngx-zero-dialog"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ko1ebayev%2Fngx-zero-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ko1ebayev%2Fngx-zero-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ko1ebayev%2Fngx-zero-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ko1ebayev%2Fngx-zero-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ko1ebayev","download_url":"https://codeload.github.com/ko1ebayev/ngx-zero-dialog/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253933107,"owners_count":21986520,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","ngx-dialog","ngx-zero-dialog"],"created_at":"2025-05-13T11:32:33.674Z","updated_at":"2025-05-13T11:32:38.327Z","avatar_url":"https://github.com/ko1ebayev.png","language":"TypeScript","readme":"# ngx-zero-dialog\n\nA lightweight Angular library for managing dialogs using the native `\u003cdialog\u003e` API. With `ngx-zero-dialog`, you can create dynamic, accessible, and customizable dialogs in your Angular applications.  \n\u003e ⚠️ Requires Angular 16 or newer!\n\n[LIVE DEMO](https://ko1ebayev.github.io/ngx-zero-dialog/)\n\n## Installation and set-up\n\n1. Install in application:\n```bash\nyarn add ngx-zero-dialog\n```\n2. Place dialog container in your root component template  \n```html\n\u003cdiv id=\"ngx-dialog-host\"\u003e\u003c/div\u003e\n```\n3. Provide Configuration\n```typescript\nimport { provideNgxZeroDialog } from 'ngx-zero-dialog';\n\n@NgModule({\n  providers: [\n    // other providers\n    provideNgxZeroDialog({ containerNodeID: 'ngx-dialog-host' }),\n  ],\n})\nexport class AppModule {}\n```\n\n## Key points behind ngx-zero-dialog  \n\n**Each dialog consist of three elements:**\n - native `\u003cdialog\u003e` element\n - host component with \u003cng-tempate\u003e placeholder to insert target view\n - the target view itself, it could be a `Component` or a `TemplateRef`\n\n**Stacking context or z-index problems:**  \n\"HTML dialogs offer a great advantage in managing stacked contexts. Each dialog exists in its own 'layer,' ensuring that dialogs and their child views never intersect, regardless of the z-index or how nodes are positioned.\n\n**Host component approach**:  \n`openDialog()` requires a `host` parameter, which is simply a component containing a content insertion point in its template: `\u003cng-template dialogContent\u003e\u003c/ng-template\u003e`. This is where the target content will be rendered.\n\nngx-zero-dialog exports `NgxZeroDialogHost` class as a base class for host components to extend it.   \n\nHost components simplify maintaining dialogs with a common layout across large applications. A good approach is to create a dedicated service for each host.\n\n**You need only css for enter/leave animations**  \nNgx-zero-dialog supports transition animations by applying specific classes for hidden and visible states. Here's an example of the built-in simple animation:  \n```css\ndialog.ngx-zero-dialog-hidden {\n  opacity: 0;\n  transition: all 0.2s ease-in-out;\n\n  \u0026::backdrop {\n    opacity: 0;\n    transition: all 0.2s ease-in-out;\n  }\n}\n\ndialog.ngx-zero-dialog-visible {\n  opacity: 1;\n\n  \u0026::backdrop {\n    opacity: 1;\n    background: rgba(0, 0, 0, 0.65);\n    backdrop-filter: blur(5px);\n  }\n}\n```\n\n\n# API Breakdown\n\n## NgxZeroDialogService\nThe `NgxDialogService` provides a simple API to open dialogs, just one public method:\n```typescript\nexport class NgxZeroDialogService {\n    openDialog\u003cT\u003e(\n      componentOrTemplate: Component | TemplateRef,\n      config: IDialogConfig,\n    ): Observable\u003cDialogResult\u003cT\u003e\u003e;\n}\n```  \nSince `openDialog()` returns an observable, the dialog will only open when the observable is subscribed to.\n\n\n## `IDialogConfig` interface\n```typescript\nexport interface IDialogConfig {\n  /**\n   * Determines whether the dialog should close when the user clicks outside the dialog (on the backdrop).\n   *\n   * Defaults to `true` if not specified.\n   */\n  closeOnBackdropClick?: boolean;\n\n  /**\n   * The host component that acts as the container for the dialog content.\n   * This component is responsible for rendering the dialog and its layout.\n   */\n  hostComponent: Component;\n\n  /**\n   * Data specific to the host component, allowing customization of the host's behavior or appearance.\n   * This data is injected into the host component at runtime.\n   */\n  hostData?: IHostData;\n\n  /**\n   * A CSS class or list of classes to be added to the root `\u003cdialog\u003e` element.\n   * This can be used to customize the dialog's appearance.\n   */\n  dialogNodeClass?: string;\n\n  /**\n   * Data to be passed to the dialog content component or template.\n   * This data is injected into the dynamic content at runtime.\n   */\n  dialogData?: IDialogData;\n\n  /**\n   * Specifies whether the dialog should use animations for its appearance and disappearance.\n   * If not specified, it may default to the global animation setting.\n   *\n   * Enabled by default\n   */\n  animated?: boolean;\n}\n\n```\n\n## `IDialogData` and `IHostData` interfaces\nBoth interfaces allow passing custom data to the dialog's content or host. The data should be an object and can include any properties you need.\n```typescript\nexport type DialogData = object;\n```\nWhen rendering a view and attaching it to Angular's component tree, NgxZeroDialog provides the `DIALOG_DATA` token in the target view and the `HOST_DATA` token in the host component. These tokens can be accessed by injecting them into the respective components:\n```typescript\n  @Component({...})\n  export class MyDialog {\n    readonly dialogData = inject\u003cDataYouExpect\u003e(DIALOG_DATA);\n  }\n```  \nData is an empty object `{}` by default if not provided.\n\n## Host component\nThere are two requirements for the host component:\n1. Host should extend `NgxZeroDialogHost\u003cT\u003e` base class, where `T` is type of `HOST_DATA` you expect to get. The `HOST_DATA` token is already inejcted in `NgxZeroDialogHost` you just need to call `super()`. \n2. Host component should import `DialogContent` directive which acts as a content insertion point for traget views and should exist in template: `\u003cng-template dialogContent\u003e\u003c/ng-template\u003e`  \n```typescript\n@Component({\n  standalone: true,\n  selector: 'dialog-host',\n  template: `\u003cng-template dialogContent\u003e\u003c/ng-template\u003e`,\n  imports: [DialogContentDirective, CommonModule],\n})\nexport class DialogHostComponent extends NgxZeroDialogHost\u003cHostDataYouExpect\u003e {\n  constructor() {\n    super();\n  }\n}\n```\n\n\n## DialogRef\nAll host components, as well as target components or templates, include an injected `DIALOG_REF` token. The `DialogRef` class provides control over the dialog's lifecycle directly from within the host or the target view:\n```typescript\nexport class DialogRef\u003cResult\u003e {\n  /**\n   * Closes the dialog and optionally emits a result.\n   * If animations are enabled, the dialog waits for the transition to complete before fully closing.\n   *\n   * @param {DialogResult\u003cResult\u003e} [value] Optional result to emit upon closure.\n   */\n  close(value?: DialogResult\u003cResult\u003e): void\n}\n```  \nThe provided value will be emitted in the subscription upon closing. `DialogResult` is a union type `Result | undefined`, where undefined is emitted as the default value when the dialog is closed without a result.\n\n`DIALOG_REF` is designed to handle host-specific logic, such as closing the dialog when a button is clicked. Here's an example of how you might use it:\n```typescript\n@Component({ ... })\nexport class AlertDialogComponent {\n    readonly dialogRef = inject\u003cboolean\u003e(DIALOG_REF);\n\n    close(result: boolean) {\n      this.dialogRef.close(result);\n    }\n}\n```\nAs mentioned before, `DIALOG_REF` is already injected in `NgxZeroDialogHost` class, like a `HOST_DATA`  \n\n\n\n# Let's start building!  \n## I recommend exploring the demo page with code examples, as it demonstrates how each dialog is reflected in the DOM. You can check it out here: [ngx-zero-dialog demo](https://ko1ebayev.github.io/ngx-zero-dialog/)\n\nFeel free to open discussions, raise issues, or reach out to me on Telegram or via email. I'm happy to help!\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fko1ebayev%2Fngx-zero-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fko1ebayev%2Fngx-zero-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fko1ebayev%2Fngx-zero-dialog/lists"}