{"_id":"@apaq/ngx-element","_rev":"7-4025627927c510e4e25c4c22c8d891bc","name":"@apaq/ngx-element","dist-tags":{"latest":"0.2.10"},"versions":{"0.2.3":{"name":"@apaq/ngx-element","version":"0.2.3","description":"A simple way to lazy load Angular components in non-angular projects","author":{"name":"Michael Krog"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/apaq/ngx-element.git"},"bugs":{"url":"https://github.com/apaq/ngx-element/issues"},"homepage":"https://github.com/apaq/ngx-element","keywords":["angular","elements","angular elements","web components","lazy loading","non-angular"],"licence":"MIT","dependencies":{"tslib":"^2.0.0"},"peerDependencies":{"@angular/common":"^11.2.0","@angular/core":"^11.2.0","@angular/elements":"^11.2.0"},"main":"bundles/apaq-ngx-element.umd.js","module":"fesm2015/apaq-ngx-element.js","es2015":"fesm2015/apaq-ngx-element.js","esm2015":"esm2015/apaq-ngx-element.js","fesm2015":"fesm2015/apaq-ngx-element.js","typings":"apaq-ngx-element.d.ts","metadata":"apaq-ngx-element.metadata.json","sideEffects":false,"_id":"@apaq/ngx-element@0.2.3","_nodeVersion":"14.15.1","_npmVersion":"7.15.1","dist":{"integrity":"sha512-0y7i+d25AjA1fxgL4xbsyfOKEakOpDjd620GzcMeJT57SqzEaWHqo3ue8u5R65qJil88+X3Cp7H8a79ndFsiQg==","shasum":"ed3551de0ed998cd2cfbf87d18eecebc1a39002d","tarball":"https://registry.npmjs.org/@apaq/ngx-element/-/ngx-element-0.2.3.tgz","fileCount":23,"unpackedSize":216970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt98PCRA9TVsSAnZWagAAHjwP/0/Vxljof9MggpW7HHD5\nT15IEM0Zewc9pExj71mQpGiprhge07ud8FSiw9DS2pvIo55p8gEsgIo83tck\nc765g4a9hAJTNGzX6cZDGWKLfrxH0CUxn9BZhgTb6ESqm3I2F37as5SOsfL9\nJ4/yPyI4Hl/vSoImT00mzdmfcUe34DiFRqN7SFkFz0hzQqr7oP8C63zm7ZQD\n8DYjWDpWFnMIh6+9+17qMNuaPcqx7jojO++6hurAm4reOnTISynTWbDHR+47\na2dG8pdu+/b9RTCnQ5owFJDjsgrNNLIssZCglCAoomowOoeKARj/0IFLqDmw\nahv88Fmk1ubX6orkZ43QNt3/3ds1CSq5Su5mnSZ304ZEjwwcX7jNwjH3cZW5\np7AxvKCgwMtS5ICpj+xG+5Zo+pRpwgWrgGTLiekE/3rwNKdOHkg1vGXwyfcN\no3P6gs3NJT6WYndefBhD7YPtfcRzHbmMiXdEbh7If1fU18zhB8c4tt13RWl4\nT+zti06ABT2zoboUAtOEj6Qo3qnTNWLNiTSbLyWIBMYKV27xLaOnSQ4lxwgM\nWGACijTTT9P7V2Txnk0Pa27a8tjBuhDu98Xwo+zer9W87MNMIIMvCqQAHpmV\noPQ5SXJkadtiSqQ8MfK+x0+n5razvCdImHU1pyGus9kAgMzfa1gtz8idNOON\nny5X\r\n=WXoa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDc2zkxA33rmEKNA1kTC/0OF8H2oukMj6eVnk9HJuuyQQIgZ5AIkmlnCYWvNp4grh2L006eVsKSne/SoHItv1by800="}]},"_npmUser":{"name":"michaelkrog","email":"mic@apaq.dk"},"directories":{},"maintainers":[{"name":"michaelkrog","email":"mic@apaq.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-element_0.2.3_1622662927430_0.9618384044697523"},"_hasShrinkwrap":false},"0.2.5":{"name":"@apaq/ngx-element","version":"0.2.5","description":"A simple way to lazy load Angular components in non-angular projects","author":{"name":"Michael Krog"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/apaq/ngx-element.git"},"bugs":{"url":"https://github.com/apaq/ngx-element/issues"},"homepage":"https://github.com/apaq/ngx-element","keywords":["angular","elements","angular elements","web components","lazy loading","non-angular"],"licence":"MIT","dependencies":{"tslib":"^2.0.0"},"peerDependencies":{"@angular/common":"^11.2.0","@angular/core":"^11.2.0","@angular/elements":"^11.2.0"},"main":"bundles/apaq-ngx-element.umd.js","module":"fesm2015/apaq-ngx-element.js","es2015":"fesm2015/apaq-ngx-element.js","esm2015":"esm2015/apaq-ngx-element.js","fesm2015":"fesm2015/apaq-ngx-element.js","typings":"apaq-ngx-element.d.ts","metadata":"apaq-ngx-element.metadata.json","sideEffects":false,"gitHead":"28f794ca5238a0e300c2b12371a161aa56e9c0f8","_id":"@apaq/ngx-element@0.2.5","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-zALZfMfrJoLA6mPxQnvm2MVv0ifhAXZRAHHlXAp+zeYv2cIQkNRf6vrMn/krZPWtjeECYBYQc17IuKwc6X1FRw==","shasum":"98816f3f1b3c53c3348da6310273ffe049b49f23","tarball":"https://registry.npmjs.org/@apaq/ngx-element/-/ngx-element-0.2.5.tgz","fileCount":23,"unpackedSize":228882,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC93tIHGq027/aDuItr9rOiEvfBusRQ3A2hTH0Jxi/y/wIgdG3k9xjzoZGnLkd+HNMl61lWbpGbxMvv795/MlDQwhg="}]},"_npmUser":{"name":"michaelkrog","email":"mic@apaq.dk"},"directories":{},"maintainers":[{"name":"michaelkrog","email":"mic@apaq.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-element_0.2.5_1632567511749_0.6532884688687297"},"_hasShrinkwrap":false},"0.2.6":{"name":"@apaq/ngx-element","version":"0.2.6","description":"A simple way to lazy load Angular components in non-angular projects","author":{"name":"Michael Krog"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/apaq/ngx-element.git"},"bugs":{"url":"https://github.com/apaq/ngx-element/issues"},"homepage":"https://github.com/apaq/ngx-element","keywords":["angular","elements","angular elements","web components","lazy loading","non-angular"],"licence":"MIT","dependencies":{"tslib":"^2.0.0"},"peerDependencies":{"@angular/common":"^11.2.0","@angular/core":"^11.2.0","@angular/elements":"^11.2.0"},"main":"bundles/apaq-ngx-element.umd.js","module":"fesm2015/apaq-ngx-element.js","es2015":"fesm2015/apaq-ngx-element.js","esm2015":"esm2015/apaq-ngx-element.js","fesm2015":"fesm2015/apaq-ngx-element.js","typings":"apaq-ngx-element.d.ts","metadata":"apaq-ngx-element.metadata.json","sideEffects":false,"_id":"@apaq/ngx-element@0.2.6","_nodeVersion":"12.19.0","_npmVersion":"7.11.2","dist":{"integrity":"sha512-M8GDtDTWlCExekwaPbvV72cGpHi/a12szL62nYrdLRMzRLUDUZnjwoGZ+9MoMevZN1OOBAR352BCiWJmL7+6Rg==","shasum":"8bff54cb5b4b2a9bb5ca053a6952254d60d64617","tarball":"https://registry.npmjs.org/@apaq/ngx-element/-/ngx-element-0.2.6.tgz","fileCount":23,"unpackedSize":227622,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDT1xVfJ3t1Rasc6YdcFFeveLMhpWXMs/rRWVm0sHqtYAIhAN6IFLrGhFrb/3gFJBiLgQ5iQASvV95TluOZxXQM6VbK"}]},"_npmUser":{"name":"michaelkrog","email":"mic@apaq.dk"},"directories":{},"maintainers":[{"name":"michaelkrog","email":"mic@apaq.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-element_0.2.6_1633076550245_0.04556233451299607"},"_hasShrinkwrap":false},"0.2.7":{"name":"@apaq/ngx-element","version":"0.2.7","description":"A simple way to lazy load Angular components in non-angular projects","author":{"name":"Michael Krog"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/apaq/ngx-element.git"},"bugs":{"url":"https://github.com/apaq/ngx-element/issues"},"homepage":"https://github.com/apaq/ngx-element","keywords":["angular","elements","angular elements","web components","lazy loading","non-angular"],"licence":"MIT","dependencies":{"tslib":"^2.0.0"},"peerDependencies":{"@angular/common":"^11.2.0","@angular/core":"^11.2.0","@angular/elements":"^11.2.0"},"main":"bundles/apaq-ngx-element.umd.js","module":"fesm2015/apaq-ngx-element.js","es2015":"fesm2015/apaq-ngx-element.js","esm2015":"esm2015/apaq-ngx-element.js","fesm2015":"fesm2015/apaq-ngx-element.js","typings":"apaq-ngx-element.d.ts","metadata":"apaq-ngx-element.metadata.json","sideEffects":false,"_id":"@apaq/ngx-element@0.2.7","_nodeVersion":"12.19.0","_npmVersion":"7.11.2","dist":{"integrity":"sha512-EPAsamEp0Po0RiHvQDqK2+o573sWw4BDmn3ye0BSjHucz/36atVlL7UVNvfDSLhKCZNpbZKaFSioRMMyuJb3Dw==","shasum":"7f6f72cf5e530c1c9bd426a9a20cd014394850ca","tarball":"https://registry.npmjs.org/@apaq/ngx-element/-/ngx-element-0.2.7.tgz","fileCount":23,"unpackedSize":230781,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAZlWOl1d3fQqtH8BycShnDnyPyYI8lSulObWBXWm5MiAiEA+giQjOBrxqHXG5Z2JKEB5Xtust3QXydBHH4ZqKQCZeI="}]},"_npmUser":{"name":"michaelkrog","email":"mic@apaq.dk"},"directories":{},"maintainers":[{"name":"michaelkrog","email":"mic@apaq.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-element_0.2.7_1633623125728_0.9804359431173979"},"_hasShrinkwrap":false},"0.2.9":{"name":"@apaq/ngx-element","version":"0.2.9","description":"A simple way to lazy load Angular components in non-angular projects","author":{"name":"Michael Krog"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/apaq/ngx-element.git"},"bugs":{"url":"https://github.com/apaq/ngx-element/issues"},"homepage":"https://github.com/apaq/ngx-element","keywords":["angular","elements","angular elements","web components","lazy loading","non-angular"],"licence":"MIT","dependencies":{"tslib":"^2.0.0"},"peerDependencies":{"@angular/common":"^11.2.0","@angular/core":"^11.2.0","@angular/elements":"^11.2.0"},"main":"bundles/apaq-ngx-element.umd.js","module":"fesm2015/apaq-ngx-element.js","es2015":"fesm2015/apaq-ngx-element.js","esm2015":"esm2015/apaq-ngx-element.js","fesm2015":"fesm2015/apaq-ngx-element.js","typings":"apaq-ngx-element.d.ts","metadata":"apaq-ngx-element.metadata.json","sideEffects":false,"_id":"@apaq/ngx-element@0.2.9","_nodeVersion":"12.19.0","_npmVersion":"7.11.2","dist":{"integrity":"sha512-hIlELkR/QKxd/tu9sk0nRWmxqK4TkRW74DI+AJHXkebSC0CBgFI8Rf5D1SI+ZHflqqSe+jT1JrNGYFvSHdn0NQ==","shasum":"8433b38c218352fd49a1521cbe820a704c4b4ce9","tarball":"https://registry.npmjs.org/@apaq/ngx-element/-/ngx-element-0.2.9.tgz","fileCount":23,"unpackedSize":233191,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwyeECRA9TVsSAnZWagAAXi0P/AgWDtsRgtlQdufUXYrl\njt09//m0L3BRKhgGBRv6CfAarkpaiBfBvjjteY1k0hbmXNI5jGvgl7KL0eos\ngr9uwcI/evTbp91F0QE6EZUbgKKdMZSQ7qDpdtJMpeXJubmq7go1XiGi/ssr\nXvOe44kNn015fe5uHYW5V/EjdmXX/ctB3etuE1TCyv/2uQtj6UpkGLGVy+dR\n8zu43dtB22i2j0O/mglqXF8KsNctHH0UUBDRM/25x+ZSwtrD9BUpkBijeHnh\nDX3lz4hkijjQADYKCsDgS1MsgkkejCNYtiDm0ze8VUesxeigMjje1lIyzTAt\nEqUm32vNZU49cTMpkSArsna0GeZECZDlRqaHmRGP5rnhxTlwmth3fuE/13Cz\n80eSard/7KTV1lkzznN2GcWqbfkUh6lCg+ibr/Yegb5MrJzEZ0FHz5ceHkiw\nwCdRFhLV8o1ZHt0tWWVIuGkN/L72iKJw4Z6whET1oqPp5IMqKxy7OEwlsN5W\nlzrtvfkmjFgL8o9rrL75f8kdUCgzJFUSkBHzya0oCOEVXWjxd2NmzJCyntBg\n3jcyvBn9rUlj76ODqbQPQLLmC5kwaUn5Ypdd3hK6mkOzdDhgSfD61LzeypcQ\n6bb0DCwEgEjrv6hVhZwv7LgK4Crhq+urjbuStZAFxDNSkBDG775t8hsDpjC/\n3HL6\r\n=Peyq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMs6gcSzvKwd7HdfcrZ69Cg7pEGbAqE8Psah+Km6mQTAiAer856WQgssVlCybI9O66KdmjJ4bIvWA15EUnHijE5Rw=="}]},"_npmUser":{"name":"michaelkrog","email":"mic@apaq.dk"},"directories":{},"maintainers":[{"name":"michaelkrog","email":"mic@apaq.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-element_0.2.9_1633674001440_0.3420618221259297"},"_hasShrinkwrap":false},"0.2.10":{"name":"@apaq/ngx-element","version":"0.2.10","description":"A simple way to lazy load Angular components in non-angular projects","author":{"name":"Michael Krog"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/apaq/ngx-element.git"},"bugs":{"url":"https://github.com/apaq/ngx-element/issues"},"homepage":"https://github.com/apaq/ngx-element","keywords":["angular","elements","angular elements","web components","lazy loading","non-angular"],"licence":"MIT","dependencies":{"tslib":"^2.0.0"},"peerDependencies":{"@angular/common":"^13.2.0","@angular/core":"^13.2.0","@angular/elements":"^13.2.0"},"module":"fesm2015/apaq-ngx-element.mjs","es2020":"fesm2020/apaq-ngx-element.mjs","esm2020":"esm2020/apaq-ngx-element.mjs","fesm2020":"fesm2020/apaq-ngx-element.mjs","fesm2015":"fesm2015/apaq-ngx-element.mjs","typings":"apaq-ngx-element.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./apaq-ngx-element.d.ts","esm2020":"./esm2020/apaq-ngx-element.mjs","es2020":"./fesm2020/apaq-ngx-element.mjs","es2015":"./fesm2015/apaq-ngx-element.mjs","node":"./fesm2015/apaq-ngx-element.mjs","default":"./fesm2020/apaq-ngx-element.mjs"}},"sideEffects":false,"_id":"@apaq/ngx-element@0.2.10","_nodeVersion":"16.13.1","_npmVersion":"6.14.15","dist":{"integrity":"sha512-h7OAKwiQo96nBKn1OcIiG91Vl+21izQGFdeYwcWMhAPo0bMHdeN6w3DWQS31GMSw4b+Iu5sEtAq91CVBEPxsBw==","shasum":"f3ab69e437f28252ada059e5689405c5298c10ba","tarball":"https://registry.npmjs.org/@apaq/ngx-element/-/ngx-element-0.2.10.tgz","fileCount":20,"unpackedSize":148798,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIgbjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkpxAAlNIZNz8GDecAPiut724Ib39e5jJvVEz15nGEjWsJ4yiZ7ite\r\nGho3aJhgNz5BqvDoHJNXLVuTljsNkecvmvhr452ByhqFMhJnx05sw0kDk7BS\r\nbYB2okGgxnkem+VeRfUR3fR79vf5fIfNOBhu2R3qNNnjQWvfU3WnZpW7+q7E\r\nxU5eeOQcEKPL3gIFM6wA9T58xEqPxAjAjvGbD5lkI+jjwUsRmZIf0LEZLKek\r\nxaXegxiOpefNuBhgxAhJxXMcFPzsERdf+QAyuJDwxHW/9B+ZVyh5ubypvFZ6\r\n7K80/saX0eRvXxTXgEJChKY5BEQ9Fi41RGVQ1IMqfA04mONyL1Yse9rmVqSP\r\noOiQECRXiVm0Hs44ltjpUtsuMHtjjM6autjH/hl8wWj5yq5SAMMCPzvxdXqp\r\nLS32RXFdRdDahNKg0wxr77rm8N356r2H1Wk1134fQ0c7ynyvfIO4n4h23LkO\r\nmP066hVhpR/ihcT+G6X7e9WCL6Xf81x5exBL6ZQ6/4k/jjN6EQWGlc2SkFv+\r\ngaRFcp2sNfboISQ79UmqXIt5gqZcVZA6Qzz+yoAr7r5BUSBeRH9RhO3I1KOT\r\nJD2sQrVoikaXBohn2UP1aNzyaHf7sVIO9h+y9fiyF5hKW9CPUzl2V/DqbCxG\r\niNPI6ip0G9wdvhrm0yVxCnpnJ9WDNxoP9Nk=\r\n=T9xL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8akZMrXmtSixb7LNi9ARRoB+I40cq8Dh/LPtuuMvg/AiEA1+rsGeeJTyZXLrbN7qRGlJO+DMVNqRoSTzX1bQEzY5M="}]},"_npmUser":{"name":"michaelkrog","email":"mic@apaq.dk"},"directories":{},"maintainers":[{"name":"michaelkrog","email":"mic@apaq.dk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-element_0.2.10_1646397155376_0.7634568441297811"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-02T19:42:07.095Z","0.2.3":"2021-06-02T19:42:07.626Z","modified":"2022-04-04T14:32:10.422Z","0.2.5":"2021-09-25T10:58:31.977Z","0.2.6":"2021-10-01T08:22:30.429Z","0.2.7":"2021-10-07T16:12:05.855Z","0.2.9":"2021-10-08T06:20:01.756Z","0.2.10":"2022-03-04T12:32:35.517Z"},"maintainers":[{"name":"michaelkrog","email":"mic@apaq.dk"}],"description":"A simple way to lazy load Angular components in non-angular projects","homepage":"https://github.com/apaq/ngx-element","keywords":["angular","elements","angular elements","web components","lazy loading","non-angular"],"repository":{"type":"git","url":"git+https://github.com/apaq/ngx-element.git"},"author":{"name":"Michael Krog"},"bugs":{"url":"https://github.com/apaq/ngx-element/issues"},"readme":"![Tests CI](https://github.com/apaq/ngx-element/workflows/Tests%20CI/badge.svg)\n\n# NgxElement\n\nNgxElement enables to lazy load Angular components in non-angular applications.\nThe library will register a custom element to which you can pass an attribute to specify what component you want to load.\n\nIt's a great way to use Angular in your CMS platform in an efficient manner.\n\n## Install Angular Elements\nThis library depends on Angular Elements. You can install it by running:\n```\n$ ng add @angular/elements\n```\n\n## Installing the library\n```\n$ npm install @apaq/ngx-element\n```\n\n## Usage\n### 1) Configure the Module containing the lazy loaded component\n\nFirst of all, expose the Angular Component that should be loaded via a customElementComponent property.\n\n```\n...\n@NgModule({\n  declarations: [TalkComponent],\n  ...\n  exports: [TalkComponent],\n  entryComponents: [TalkComponent]\n})\nexport class TalkModule {\n  customElementComponent: Type<any> = TalkComponent;\n  ...\n}\n```\n\n### 2) Define the lazy component map in your AppModule\nJust like with the Angular Router, define the map of component selector and lazy module.\n\n```\nconst lazyConfig = {\n  definitions: [\n    {\n      selector: 'talk',\n      loadChildren: () => import('./talk/talk.module').then(m => m.TalkModule)\n    }\n  ],\n  prefix: 'ws'\n];\n\n\n@NgModule({\n  ...,\n  imports: [\n    ...,\n    NgxElementModule.forRoot(lazyConfig)\n  ],\n  ...\n})\nexport class AppModule {\n  ...\n  ngDoBootstrap() {}\n}\n```\n\n### 3) Use the lazy loaded component\nYou can load your Angular component by adding an `<ngx-element>` tag to the DOM in your non-angular application like follows:\n\n```\n<ws-talk\n  title=\"Angular Elements\"\n  description=\"How to write Angular and get Web Components\"\n  speaker=\"Bruno\">\n</ws-talk>\n```\n\n### 4) Listen to events\nYou can listen to events emitted by Angular components.\n\nAdd an `@Output` event to your component:\n\n```\n...\n@Output() tagClick: EventEmitter<string> = new EventEmitter();\n...\n```\n\nThen add an event listener to the `tagClick` event on the appropiate `<ngx-element>` element:\n\n```\nconst talks = document.querySelector('ws-talk');\ntalks.addEventListener('tagClick', event => {\n  const emittedValue = event.detail;\n  ...\n});\n```\n","readmeFilename":"README.md"}