{"id":14972494,"url":"https://github.com/independer/ng-modal","last_synced_at":"2025-10-26T19:31:35.511Z","repository":{"id":38324825,"uuid":"106865235","full_name":"Independer/ng-modal","owner":"Independer","description":"Lightweight implementation of modal dialogs for Angular. Includes a Bootstrap theme and works with Bootstrap 4 styles.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:08:02.000Z","size":4951,"stargazers_count":15,"open_issues_count":46,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-31T22:51:16.443Z","etag":null,"topics":["angular","bootstrap4","dialog","modal"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/ng-modal-playground","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/Independer.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-13T19:27:35.000Z","updated_at":"2024-01-04T15:49:13.000Z","dependencies_parsed_at":"2023-02-06T11:15:37.262Z","dependency_job_id":null,"html_url":"https://github.com/Independer/ng-modal","commit_stats":null,"previous_names":["independer/ind-modal"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Independer%2Fng-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Independer%2Fng-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Independer%2Fng-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Independer%2Fng-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Independer","download_url":"https://codeload.github.com/Independer/ng-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394323,"owners_count":19464583,"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","bootstrap4","dialog","modal"],"created_at":"2024-09-24T13:47:00.462Z","updated_at":"2025-10-26T19:31:30.071Z","avatar_url":"https://github.com/Independer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-modal\n\nLightweight implementation of modal dialogs for Angular.\n\nIncludes a [Bootstrap](https://getbootstrap.com/docs/4.0/components/modal/) theme. Also works with standard Bootstrap styles (e.g. from [CDN](https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css)). See the [Styles](#styles) section below for more information on styling.  \n\n## Installation\n\nTo install this library, run:\n\n```bash\n$ npm install @independer/ng-modal --save\n```\n\n## Usage\n\nImport the `ModalModule`:\n\n```ts\nimport { ModalModule } from '@independer/ng-modal';\n...\n\n@NgModule({\n  declarations: [\n    ...\n  ],\n  imports: [\n    ...,\n\n    // Import this module in order to use the \"modal\" component and ModalService\n    ModalModule\n  ],\n  providers: [\n    ...\n  ],\n  bootstrap: [\n    ...\n  ],\n  entryComponents: [\n    // Add here modal components that you want to open using ModalService\n  ]\n})\nexport class AppModule { }\n\n```\n\n### Option 1 - Inside a template of another component\nDefine your modal dialog inside a template of another component. For example, in your `home.component.html` you could have:\n\n```html\n\u003cmodal #firstModal\u003e\n  \u003cmodal-header\u003e\n    \u003ch4\u003eI am a Simple Dialog\u003c/h4\u003e\n  \u003c/modal-header\u003e\n  \u003cmodal-content\u003e\n    This dialog is defined inside a template of another component.\n  \u003c/modal-content\u003e\n  \u003cmodal-footer\u003e\n    \u003cbutton (click)=\"firstModal.close()\"\u003eokay!\u003c/button\u003e\n  \u003c/modal-footer\u003e\n\u003c/modal\u003e\n```\nThen open the dialog as follows:\n\n```html\n\u003cbutton (click)=\"firstModal.open()\"\u003eSimple Dialog\u003c/button\u003e\n```\n\n### Option 2 - Component + ModalService\nDefine your modal dialog as a component and open it programmatically using `ModalService`.\n\n**modal.component.html**\n```html\n\u003cmodal\u003e\n  \u003cmodal-header\u003e\n    \u003ch4\u003eI am a Programmatic Dialog\u003c/h4\u003e\n  \u003c/modal-header\u003e\n  \u003cmodal-content\u003e\n    This dialog is opened programmatically from code.\n  \u003c/modal-content\u003e\n  \u003cmodal-footer\u003e\n    \u003cbutton (click)=\"close()\"\u003eokay!\u003c/button\u003e\n  \u003c/modal-footer\u003e\n\u003c/modal\u003e\n\n```\n\n**modal.component.ts**\n```ts\nimport { Component } from '@angular/core';\nimport { ModalRef } from '@independer/ng-modal';\n\n@Component({\n  templateUrl: './modal.component.html'\n})\nexport class ModalComponent {\n  constructor(private modal: ModalRef) {\n  }\n\n  close() {\n    this.modal.close();\n  }\n}\n\n```\n**Important**: Make sure you add your component to `entryComponents` inside `@NgModule` declaration:\n\n```ts\n@NgModule({\n  declarations: [...],\n  imports: [\n    ...,\n    ModalModule\n  ],\n  providers: [...],\n  bootstrap: [...],\n  entryComponents: [\n    ModalComponent\n  ]\n})\n```\nInject the `ModalService` where you want to open your modal component from. For example:\n\n**home.component.ts**\n```ts\nimport { Component } from '@angular/core';\nimport { ModalService } from '@independer/ng-modal';\nimport { ModalComponent } from './modal.component';\n\n@Component({\n  selector: 'app-home',\n  templateUrl: './home.component.html'  \n})\nexport class HomeComponent {\n  constructor(private modalService: ModalService) {    \n  }\n\n  openModal() {\n    this.modalService.open(ModalComponent);\n  }\n}\n\n```\n\n### Option 3 - Router\nDefine your modal dialog as a component (like in **Option 2**) and open it by navigating to a route.\n\n**modal-route.component.html**\n```html\n\u003cmodal [routeBehavior]=\"true\"\u003e\n  \u003cmodal-header\u003e\n    \u003ch4\u003eI am a Routed Dialog\u003c/h4\u003e\n  \u003c/modal-header\u003e\n  \u003cmodal-content\u003e\n    This dialog is opened by navigating to a route\n  \u003c/modal-content\u003e\n\u003c/modal\u003e\n```\nNote here `[routeBehavior]=\"true\"` - this tells the `modal` component to open itself as soon as the router adds it to the DOM, and\nafter user closes it, navigate back to the previous URL. \n\n**modal-route.component.ts**\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  templateUrl: './modal-route.component.html'  \n})\nexport class ModalRouteComponent {\n}\n\n```\nDefine a route:\n\n**app.routing.module**\n```ts\nimport { NgModule } from '@angular/core';\nimport { RouterModule, Routes, PreloadAllModules } from '@angular/router';\n\nimport { ModalRouteComponent } from './modal-route.component';\nimport { HomeComponent } from './home.component';\n\nconst routes: Routes = [\n  { \n    path: '', component: HomeComponent, children: [\n      { path: 'modal-component', component: ModalRouteComponent }\n    ]\n  }\n];\n\n@NgModule({\n  imports: [\n    RouterModule.forRoot(routes)\n  ],\n  exports: [\n    RouterModule\n  ]\n})\nexport class AppRoutingModule { }\n```\n\nOpen the modal by navigating to `/modal-component`:\n\n```html\n\u003cbutton [routerLink]=\"['modal-component']\"\u003eRouted Dialog\u003c/button\u003e\n```\n\n## Styles\n\nThe library comes with two predefined themes:\n \n- `independer` - our own theme that we use at `independer.nl`\n- `bootstrap` - https://getbootstrap.com/docs/4.0/components/modal/ (note that you don't need to include this theme if your app already includes Bootstrap styles, see below).\n\nIn order to include the styles in your Angular CLI application, add the following to the `styles` section of `.angular-cli.json`:\n\n```json\n\"styles\": [\n  ...,\n  \"../node_modules/@independer/modal/themes/\u003ctheme\u003e/styles.css\"\n],\n```\n*Replace `\u003ctheme\u003e` with either `bootstrap` or `independer`*.\n\nIf you would like to customize the styles, you can copy the SASS source code from `node_modules/@independer/modal/themes/\u003ctheme\u003e/styles.scss` to your application and change it the way you need.\n\n### Works with standard Bootstrap styles\nIn case your already use [Bootstrap](https://getbootstrap.com/docs/4.0/getting-started/introduction/) in your app or you would like to use the \"official\" Bootstrap styles, you don't need\nto include any themes in `.angular-cli.json`. The library uses the same CSS classes and HTML structure as\nmodals in Bootstrap, so it works with the standard Bootstrap styles.\n\n### Examples\n\nSee the above examples in action by running the Angular app in the **playground** folder. \n\nIn order to run the example application you need to first build the library and link it to **node_modules** in the **playground** folder. Please follow the following steps:\n\n```bash\n# 1. Install dependencies\nyarn install\n\n# 2. Build the library\nnpm run build\n\n# 3. Go to /dist folder\ncd dist\n\n# 4.  Create an NPM link\nnpm link\n\n# 4. Go to the \"playground\" folder\ncd ../playground\n\n# 5. Install dependencies\nyarn install\n\n# 6. Run the example application\nyarn start\n```\n\nNow you can navigate to `http://localhost:4200` to use the **playground** app.\n\n## Development of the Library\n\nTo generate all all the package assets in the `dist` folder run:\n\n```bash\n$ npm run build\n```\n\nTo lint all `*.ts` files:\n\n```bash\n$ npm run lint\n```\n\nTo test the library with the `playground` application link the `dist` folder using `npm link`:\n\n```bash\n# In \"dist\" folder\nnpm link\n\n# in \"playground\" folder. This step is also done automatically after \"yarn install\"\nnpm link @independer/ng-modal\n```\n\n## License\n\nMIT © [Independer.nl](https://werkenbij.independer.nl/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findepender%2Fng-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findepender%2Fng-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findepender%2Fng-modal/lists"}