{"id":15653151,"url":"https://github.com/zurfyx/angular-custom-modal","last_synced_at":"2025-04-30T17:05:57.883Z","repository":{"id":57178236,"uuid":"108830133","full_name":"zurfyx/angular-custom-modal","owner":"zurfyx","description":"Angular2+ Modal / Dialog (with inner component support).","archived":false,"fork":false,"pushed_at":"2018-04-24T21:56:03.000Z","size":973,"stargazers_count":30,"open_issues_count":9,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-30T17:05:45.720Z","etag":null,"topics":["angular","dialog","modal","typescript"],"latest_commit_sha":null,"homepage":"https://zurfyx.github.io/angular-custom-modal/","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/zurfyx.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}},"created_at":"2017-10-30T09:37:54.000Z","updated_at":"2023-05-08T13:25:47.000Z","dependencies_parsed_at":"2022-09-14T02:10:25.995Z","dependency_job_id":null,"html_url":"https://github.com/zurfyx/angular-custom-modal","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-custom-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-custom-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-custom-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zurfyx%2Fangular-custom-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zurfyx","download_url":"https://codeload.github.com/zurfyx/angular-custom-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251748947,"owners_count":21637418,"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","typescript"],"created_at":"2024-10-03T12:44:49.561Z","updated_at":"2025-04-30T17:05:57.845Z","avatar_url":"https://github.com/zurfyx.png","language":"TypeScript","readme":"# Angular Custom Modal\n\n[![npm Version](https://img.shields.io/npm/v/angular-custom-modal.svg)](https://www.npmjs.com/package/angular-custom-modal)\n[![Build Status](https://travis-ci.org/zurfyx/angular-custom-modal.svg?branch=master)](https://travis-ci.org/zurfyx/angular-custom-modal)\n\n\u003e Angular2+ Modal / Dialog (with inner component support).\n\nA continuation of https://stackoverflow.com/a/46949848\n\n## Demo\n\n[zurfyx.github.io/angular-custom-modal](https://zurfyx.github.io/angular-custom-modal/)\n\n## Install\n\n```\nnpm install angular-custom-modal\n```\n\n## Features\n\nCore:\n\n- Light: no CSS / JS frameworks attached\n- [Bootstrap 3 \u0026 4 CSS compatible](#bootstrap)\n- Custom modal header, body and header\n- [Modal stacking support](#nested-modal)\n- Lazy inner component initialization, and `ngOnDestroy`(ed) when modal is closed\n\nMinor:\n\n- Optional CSS animations\n- Optional parent scrolling when modal is visible\n- Escape or button to close modal\n\n## Usage\n\napp.module.ts\n\n```\nimports: [\n  ...\n  ModalModule,\n  ...\n],\n...\n})\n```\n\n### Raw HTML\n\napp.component.html\n\n```\n\u003cbutton (click)=\"htmlInsideModal.open()\"\u003eRaw HTML inside modal\u003c/button\u003e\n\u003cmodal #htmlInsideModal\u003e\n  \u003cng-template #modalHeader\u003e\u003ch2\u003eHTML inside modal\u003c/h2\u003e\u003c/ng-template\u003e\n  \u003cng-template #modalBody\u003e\n    \u003cp\u003eHTML content inside modal\u003c/p\u003e\n  \u003c/ng-template\u003e\n\u003c/modal\u003e\n```\n\n### Component inside Modal\n\nmy-component.component.ts\n\n```\n@Component({\n  selector: 'app-my-component',\n  templateUrl: 'my-component.component.html',\n})\nexport class AppModalContentComponent { }\n```\n\nmy-component.component.html\n\n```\n\u003cp\u003eMy component's HTML\u003c/p\u003e\n```\n\napp.component.html\n\n```\n\u003cbutton (click)=\"componentInsideModal.open()\"\u003eComponent inside modal\u003c/button\u003e\n\u003cmodal #componentInsideModal\u003e\n  \u003cng-template #modalHeader\u003e\u003ch2\u003eComponent inside modal\u003c/h2\u003e\u003c/ng-template\u003e\n  \u003cng-template #modalBody\u003e\n    \u003capp-my-component\u003e\u003c/app-my-component\u003e\n  \u003c/ng-template\u003e\n  \u003cng-template #modalFooter\u003e\u003c/ng-template\u003e\n\u003c/modal\u003e\n```\n\n### Nested Modal\n\napp.component.html\n\n```\n\u003cmodal #nestedModal\u003e\n  \u003cng-template #modalHeader\u003e\u003ch2\u003eNested modal\u003c/h2\u003e\u003c/ng-template\u003e\n  \u003cng-template #modalBody\u003e\n    Nested modals can be created by simply adding a \u0026lt;modal\u0026gt; inside a \u0026lt;modal\u0026gt;\n    ...\n    \u003cbutton (click)=\"nestedModalX.open()\"\u003eOpen nested modal\u003c/button\u003e\n    \u003cmodal #nestedModalX\u003e\n      \u003cng-template #modalBody\u003eThis is the nested modal content.\u003c/ng-template\u003e\n    \u003c/modal\u003e\n  \u003c/ng-template\u003e\n\u003c/modal\u003e\n```\n\nSee [example source code](https://github.com/zurfyx/angular-custom-modal/tree/master/example/app) for more information.\n\n**Why ng-template?**\n\nng-template prevents the parent component from initializing the component. Only when the modal library finds it convenient the component will be initialize and visible to the user. Hence, it preserves the natural `ngOnInit()` and `ngOnDestroy()` that we expect.\n\nSimilar libraries which make use of `\u003cng-content\u003e` and its [content transclution strategy](https://scotch.io/tutorials/angular-2-transclusion-using-ng-content#toc-multi-slot-transclusion), do not prevent the component from initializing, but rather just hide it. The component was already initialized in the parent component.\n\nReferences:\u003cbr\u003e\nhttps://angular.io/api/common/NgTemplateOutlet\u003cbr\u003e\nhttps://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/\u003cbr\u003e\nhttps://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b\u003cbr\u003e\nhttps://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e\u003cbr\u003e\n\n## Styles\n\nThe library carries the minimum generic styles. Beautifying it is up to you.\n\n### Default styles\n\nYou can find the demo copy-paste styles in [modal.css](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/modal.css).\n\n### Bootstrap\n\nBootstrap users require no additional CSS other than the Bootstrap library (either version 3 or 4).\n\n## API\n\n### ModalComponent\n\n| Name | Type | Description |\n| ----| ----- | ----------- |\n| header | @ContentChild('modalHeader'): TemplateRef\u003cany\u003e | Angular Template (`\u003cng-template\u003e`) to use as header. |\n| body | @ContentChild('modalBody'): TemplateRef\u003cany\u003e | Angular Template (`ng-template`) to use as body. |\n| footer | @ContentChild('modalFooter'): TemplateRef\u003cany\u003e | Angular Template (`ng-template`) to use as footer. |\n| closeOnOutsideClick | @Input(): boolean = true | When set to `true` modal will close when a click is performed outside the modal container. |\nopen | () =\u003e void | Opens the modal.\n| close | () =\u003e void | Closes the modal. |\n| isTopMost | () =\u003e boolean | Returns true is the modal is the top most modal, or false if it is underneath another modal. |\n\n## Special thanks\n\nTo [Stephen Paul](https://stackoverflow.com/users/1087131/stephen-paul) for the [initial Angular 2 Modal version](https://stackoverflow.com/a/40144809/2013580).\n\n## License\n\nMIT © [Gerard Rovira Sánchez](//zurfyx.com)","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzurfyx%2Fangular-custom-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzurfyx%2Fangular-custom-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzurfyx%2Fangular-custom-modal/lists"}