{"id":19736511,"url":"https://github.com/soc221b/ngx-dialog","last_synced_at":"2025-03-20T08:36:43.203Z","repository":{"id":258020117,"uuid":"870469532","full_name":"soc221b/ngx-dialog","owner":"soc221b","description":"[WIP] Type-safe Angular Dialogs Directive for Angular 16+","archived":false,"fork":false,"pushed_at":"2025-03-03T06:44:48.000Z","size":755,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-03T07:28:53.291Z","etag":null,"topics":["angular","material"],"latest_commit_sha":null,"homepage":"","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/soc221b.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"buy_me_a_coffee":"iendeavor"}},"created_at":"2024-10-10T05:23:55.000Z","updated_at":"2025-03-03T06:44:23.000Z","dependencies_parsed_at":"2024-10-17T10:09:02.230Z","dependency_job_id":"4b94635b-b9fd-4d67-a3d0-c71cd43b481a","html_url":"https://github.com/soc221b/ngx-dialog","commit_stats":null,"previous_names":["soc221b/ngx-mat-dialog","soc221b/ngx-dialog"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soc221b%2Fngx-dialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soc221b%2Fngx-dialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soc221b%2Fngx-dialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soc221b%2Fngx-dialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soc221b","download_url":"https://codeload.github.com/soc221b/ngx-dialog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244580606,"owners_count":20475936,"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","material"],"created_at":"2024-11-12T01:07:21.922Z","updated_at":"2025-03-20T08:36:43.182Z","avatar_url":"https://github.com/soc221b.png","language":"TypeScript","funding_links":["https://buymeacoffee.com/iendeavor"],"categories":["Third Party Components"],"sub_categories":["Modals"],"readme":"# NgxMatDialog\n\nType-safe Angular Material Dialogs Directive for Angular\n\n## Installation\n\n```bash\nnpm install ngx-mat-dialog\n```\n\n## Usage\n\n```typescript\nimport { MatDialogDirective } from \"ngx-mat-dialog\";\n\n@Component({\n  selector: \"dialog-overview-example\",\n  templateUrl: \"dialog-overview-example.html\",\n  standalone: true,\n  imports: [MatDialogDirective, DialogOverviewExampleDialog],\n})\nexport class DialogOverviewExample {\n  name = \"\";\n  animal = \"\";\n  visible = false;\n\n  openDialog() {\n    this.visible = true;\n  }\n}\n```\n\n```html\n\u003cbutton (click)=\"openDialog()\"\u003eOpen Dialog\u003c/button\u003e\n\n\u003cng-template matDialog [(matDialogVisible)]=\"visible\"\u003e\n  \u003cdialog-overview-example-dialog\n    [name]=\"name\"\n    [(animal)]=\"animal\"\n  \u003e\u003c/dialog-overview-example-dialog\u003e\n\u003c/ng-template\u003e\n```\n\n\u003e **Note:** You can't use shorthand syntax like `*matDialog`, because it doesn't support `@Output()`. As a result, you cannot listen to the visibility changes of the dialog.\n\n\u003e **Note:** Avoid using `MatDialogConfig.data` to pass data to the dialog and retrieve `dialogResult` from the `MatDialogRef.close`. Instead, use `@Input()` and `@Output()` for type safety.\n\n## API\n\n**Selector:** `[matDialog]`\n\n**Exported as:** `matDialog`\n\n### Properties\n\n| Input                                                     | Description                               |\n| --------------------------------------------------------- | ----------------------------------------- |\n| `@Input() matDialogVisible: boolean;`                     | Whether the dialog is visible.            |\n| `@Input() matDialogConfig: MatDialogConfig\u003cundefined\u003e;`   | Configuration for the dialog.             |\n| `@Output() matDialogVisibleChange: EventEmitter\u003cboolean\u003e` | Emits when the dialog visibility changes. |\n| `dialogRef: null \\| MatDialogRef\u003cunknown, void\u003e`          | Reference to the `MatDialogRef`.          |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoc221b%2Fngx-dialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoc221b%2Fngx-dialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoc221b%2Fngx-dialog/lists"}