angular-custom-modal - npm Package Compare versions

Comparing version 0.0.0 to 1.0.0

package.json

@@ -1,1 +0,1 @@
-{"name":"angular-custom-modal","version":"0.0.0","license":"MIT","scripts":{"start":"ng serve","build":"ng-packagr -p ng-package.json","test":"npm run lint && ng test --watch false","test-watch":"ng test","e2e":"ng e2e","lint":"ng lint"},"private":false,"dependencies":{"@angular/animations":"^4.2.4","@angular/common":"^4.2.4","@angular/compiler":"^4.2.4","@angular/core":"^4.2.4","@angular/forms":"^4.2.4","@angular/http":"^4.2.4","@angular/platform-browser":"^4.2.4","@angular/platform-browser-dynamic":"^4.2.4","@angular/router":"^4.2.4","core-js":"^2.4.1","rxjs":"^5.4.2","zone.js":"^0.8.14"},"devDependencies":{"@angular/cli":"1.4.9","@angular/compiler-cli":"^4.2.4","@angular/language-service":"^4.2.4","@types/jasmine":"~2.5.53","@types/jasminewd2":"~2.0.2","@types/node":"~6.0.60","codelyzer":"~3.2.0","jasmine-core":"~2.6.2","jasmine-spec-reporter":"~4.1.0","karma":"~1.7.0","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.5.0-rc.1","protractor":"~5.1.2","ts-node":"~3.2.0","tslint":"~5.7.0","typescript":"~2.3.3"},"main":"bundles/angular-custom-modal.umd.js","module":"angular-custom-modal.es5.js","es2015":"angular-custom-modal.js","typings":"angular-custom-modal.d.ts","metadata":"angular-custom-modal.metadata.json"}
+{"name":"angular-custom-modal","description":"Angular2+ Modal / Dialog (with inner component support).","author":{"name":"Gerard Rovira Sánchez","email":"[e-mail]","url":"zurfyx.com"},"version":"1.0.0","license":"MIT","scripts":{"start":"ng serve","build":"ng-packagr -p ng-package.json","build-ghpages":"ng build --base-href \"https://zurfyx.github.io/angular-custom-modal/\" --output-path \"dist-ghpages\"","test":"npm run lint && ng test --watch false","test-watch":"ng test","e2e":"ng e2e","lint":"ng lint"},"repository":{"type":"git","url":"git+https://github.com/zurfyx/angular-custom-modal.git"},"bugs":{"url":"https://github.com/zurfyx/angular-custom-modal/issues"},"homepage":"https://github.com/zurfyx/angular-custom-modal#readme","keywords":["modal","dialog","angular","typescript"],"private":false,"dependencies":{},"devDependencies":{"@angular/animations":"^4.2.4","@angular/cli":"1.4.9","@angular/common":"^4.2.4","@angular/compiler":"^4.2.4","@angular/compiler-cli":"^4.2.4","@angular/core":"^4.2.4","@angular/forms":"^4.2.4","@angular/http":"^4.2.4","@angular/language-service":"^4.2.4","@angular/platform-browser":"^4.2.4","@angular/platform-browser-dynamic":"^4.2.4","@angular/router":"^4.2.4","@types/jasmine":"~2.5.53","@types/jasminewd2":"~2.0.2","@types/node":"~6.0.60","codelyzer":"~3.2.0","core-js":"^2.4.1","jasmine-core":"~2.6.2","jasmine-spec-reporter":"~4.1.0","karma":"~1.7.0","karma-chrome-launcher":"~2.1.1","karma-cli":"~1.0.1","karma-coverage-istanbul-reporter":"^1.2.1","karma-jasmine":"~1.1.0","karma-jasmine-html-reporter":"^0.2.2","ng-packagr":"^1.5.0-rc.1","protractor":"~5.1.2","rxjs":"^5.4.2","ts-node":"~3.2.0","tslint":"~5.7.0","typescript":"~2.3.3","zone.js":"^0.8.14"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"main":"bundles/angular-custom-modal.umd.js","module":"angular-custom-modal.es5.js","es2015":"angular-custom-modal.js","typings":"angular-custom-modal.d.ts","metadata":"angular-custom-modal.metadata.json"}

README.md

@@ -1,27 +0,115 @@
-# AngularCustomModal
+# Angular Custom Modal
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.4.9.
+[![npm Version](https://img.shields.io/npm/v/angular-custom-modal.svg)](https://www.npmjs.com/package/angular-custom-modal)
+[![Build Status](https://travis-ci.org/zurfyx/angular-custom-modal.svg?branch=master)](https://travis-ci.org/zurfyx/angular-custom-modal)
 
-## Development server
+> Angular2+ Modal / Dialog (with inner component support).
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+A continuation of https://stackoverflow.com/a/46949848
 
-## Code scaffolding
+## Demo
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+[zurfyx.github.io/angular-custom-modal](https://zurfyx.github.io/angular-custom-modal/)
 
-## Build
+## Install
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+```
+npm install angular-custom-modal
+```
 
-## Running unit tests
+## Features
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+- Light: no CSS / JS frameworks attached
+- Bootstrap CSS compatible
+- Custom modal header, body and header
+- Modal stacking support
+- Lazy inner component initialization, and `ngOnDestroy`(ed) when modal is closed
+- Parent scrolling disabled when modal is visible
 
-## Running end-to-end tests
+## Usage
 
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+app.module.ts
 
-## Further help
+```
+imports: [
+  ...
+  ModalModule,
+  ...
+],
+...
+})
+```
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+### Raw HTML
+
+app.component.html
+
+```
+<button (click)="htmlInsideModal.open()">Raw HTML inside modal</button>
+<modal #htmlInsideModal>
+  <ng-template #modalHeader><h2>HTML inside modal</h2></ng-template>
+  <ng-template #modalBody>
+    <p>HTML content inside modal</p>
+  </ng-template>
+</modal>
+```
+
+### Component inside Modal
+
+my-component.component.ts
+
+```
+@Component({
+  selector: 'app-my-component',
+  templateUrl: 'my-component.component.html',
+})
+export class AppModalContentComponent { }
+```
+
+my-component.component.html
+
+```
+<p>My component's HTML</p>
+```
+
+app.component.html
+
+```
+<button (click)="componentInsideModal.open()">Component inside modal</button>
+<modal #componentInsideModal>
+  <ng-template #modalHeader><h2>Component inside modal</h2></ng-template>
+  <ng-template #modalBody>
+    <app-my-component></app-my-component>
+  </ng-template>
+  <ng-template #modalFooter></ng-template>
+</modal>
+```
+
+See [example source code](https://github.com/zurfyx/angular-custom-modal/tree/master/example/app) for more information.
+
+**Why ng-template?**
+
+ng-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.
+
+Similar libraries which make use of `<ng-content>` 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.
+
+References:<br>
+https://angular.io/api/common/NgTemplateOutlet<br>
+https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/<br>
+https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b<br>
+https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e<br>
+
+## TODO
+
+- [ ] Modal header/body/footer as a component or directive (not sure if feasable)
+- [ ] Optional styles
+- [ ] Optional scrolling when modal is active
+- [ ] Optional visibility
+
+## Special thanks
+
+To [Stephen Paul](https://stackoverflow.com/users/1087131/stephen-paul) for the [initial Angular 2 Modal version](https://stackoverflow.com/a/40144809/2013580).
+
+## License
+
+MIT © [Gerard Rovira Sánchez](//zurfyx.com)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47881

increased by9.12%

Dependency count

0

decreased by-100%

Number of package files

17

increased by6.25%

Number of low maintenance alerts

1

decreased by-66.67%

Number of low quality alerts

1

decreased by-66.67%

Number of lines in readme file

115

increased by310.71%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

32

increased by60%

Dependency changes

• - Removed@angular/animations@^4.2.4

• - Removed@angular/common@^4.2.4

• - Removed@angular/compiler@^4.2.4

• - Removed@angular/core@^4.2.4

• - Removed@angular/forms@^4.2.4

• - Removed@angular/http@^4.2.4

• - Removed@angular/platform-browser@^4.2.4

• - Removed@angular/platform-browser-dynamic@^4.2.4

• - Removed@angular/router@^4.2.4

• - Removedcore-js@^2.4.1

• - Removedrxjs@^5.4.2

• - Removedzone.js@^0.8.14

• - Removed@angular/animations@4.4.7(transitive)

• - Removed@angular/common@4.4.7(transitive)

• - Removed@angular/compiler@4.4.7(transitive)

• - Removed@angular/core@4.4.7(transitive)

• - Removed@angular/forms@4.4.7(transitive)

• - Removed@angular/http@4.4.7(transitive)

• - Removed@angular/platform-browser@4.4.7(transitive)

• - Removed@angular/platform-browser-dynamic@4.4.7(transitive)

• - Removed@angular/router@4.4.7(transitive)

• - Removedcore-js@2.6.12(transitive)

• - Removedrxjs@5.5.12(transitive)

• - Removedsymbol-observable@1.0.1(transitive)

• - Removedtslib@1.14.1(transitive)

• - Removedzone.js@0.8.29(transitive)