{"_id":"@2ng/dynamic-component","_rev":"1-43161e9f390798c645281091152db009","name":"@2ng/dynamic-component","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@2ng/dynamic-component","version":"0.0.1","peerDependencies":{"@angular/common":"^9.1.7","@angular/core":"^9.1.7"},"gitHead":"6de9fd641e9e4184b504856d66fabcde7c4bbfca","description":"```ts\r import { DynamicComponentModule } from '@2ng/dynamic-component';\r ```","_id":"@2ng/dynamic-component@0.0.1","_nodeVersion":"12.14.1","_npmVersion":"6.14.4","dist":{"integrity":"sha512-D4FH0LvWS5l+RJwQht3FXJ2scH0bmfDogvZxvqhYEqw07yrmThvhddtvso/nWM2tm8jYuxFLr1tG0ePJsk8Emw==","shasum":"96727757bc33f096ea48ee55623e1fc9ac05acd2","tarball":"https://registry.npmjs.org/@2ng/dynamic-component/-/dynamic-component-0.0.1.tgz","fileCount":12,"unpackedSize":9680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezF2xCRA9TVsSAnZWagAAuR8P+wT0nI9LOXzVXVDM4/b7\n4Ep3MVq4xmOXjJ/KBDE9nzAD8P79clULrC8Dai7f0HCAStWBjPwOtYL4Rsvh\n6nXjhGdycHKSXbEuOK5dGaFCNlXuQbuXZnTWQXZz0QdOi0pT1ti2Y7BEEcJ5\nTrzafoaD/M1b7nbq8W5im8vEp4VV8zniMu5wQl53cQTfzIr4FMR4oBx2r92o\n1fRbiwd3paQfs7e5JzXn9soqst1Hm8e7NHGMLWVwC8OO5sgH/+0UDiEcHv8h\n8ULzA3LckRZCt1FWepcWMGo9XOLvpVxHA4E752odISP1QRZPh6tr/tDamo1/\n8tcqOW5+9cYlqXkGbJaSDCFHQ8S99CZFZX2M6cKX5lfUcO/7C+XryylHVkee\nsgGn8bsxvNIcCtXpMRxeTvX+q1Dr+MeeTw24+J0C4+YJZ2fHyWPefdw4CFcg\nHQHCMt9J1PbdiDMrvVQ3XAxceYV5sPhfP0WiC3OITqjMjEIZfPnXoTC14E1l\nJ2pWxEQG1BJ2nBpEkrqoLmaTrnz/J53+vcZw+1TBILNRwcZ33nSSvLdwQIdA\n9qekA0mJsmG+HvTpZ6O/CBcmf0mJ8qAP24Nrz8JXshFkCL4hecGuaiHN0KC4\nT3Lw0Hcvn0gjsOgfUzZaUBsmxalyq08HAm5O55xCzFNshvj31sGAjf3X1awG\nZxen\r\n=7Y5x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA83xcbCqZUFemX2OuYkTzSgjYtHCQ/epBZkM+zbeerkAiBuQXYySupvarOQd9zrh2FD7BA4guk+pqvyyAHoialHMA=="}]},"maintainers":[{"name":"podkovyrovda","email":"a.podkovyrov@yandex.ru"}],"_npmUser":{"name":"podkovyrovda","email":"a.podkovyrov@yandex.ru"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dynamic-component_0.0.1_1590451633497_0.754048624438435"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-26T00:07:13.256Z","0.0.1":"2020-05-26T00:07:13.613Z","modified":"2022-04-04T10:42:44.387Z"},"maintainers":[{"name":"podkovyrovda","email":"a.podkovyrov@yandex.ru"}],"description":"```ts\r import { DynamicComponentModule } from '@2ng/dynamic-component';\r ```","readme":"# @2ng/dynamic-component\r\n\r\n## Usage\r\n\r\n```ts\r\nimport { DynamicComponentModule } from '@2ng/dynamic-component';\r\n```\r\n\r\n```html\r\n<ng-container\r\n  [dynamicComponent]=\"component\"\r\n  [inputs]=\"inputs\"\r\n  [outputs]=\"outputs\"\r\n></ng-container>\r\n```\r\n\r\n## API\r\n\r\n```ts\r\ncomponent: Type<C>\r\n```\r\n\r\nКомпонент Angular\r\n\r\n```ts\r\ninputs: Partial<{ [input in keyof C]: C[input] }>;\r\n```\r\n\r\nОбъект, ключи которого - это инпуты компонента, который будет отрисован динамически. Значение соответствует типу этого инпута.\r\n\r\nТипизацией не смог получить только инпуты компонента, поэтому вывожу все свойства и методы класса в типах. Но внутри директивы присваиваю значение свойства только если задано значение свойству с именем инпута.\r\n\r\n```ts\r\noutputs: Partial<\r\n  {\r\n    [output in keyof C]: C[output] extends EventEmitter<infer K>\r\n      ? (event: K) => void\r\n      : never;\r\n  }\r\n>;;\r\n```\r\n\r\nОбъект, ключи которого - это аутпуты компонента, который будет отрисован динамически. Значение - функция, которая будет передана в метод `subscribe`, при подписке на аутпут компонента.\r\n\r\nАналогично в типах вывожу все свойства и методы, но будет ошибка, если это свойство не экземпляр `EventEmitter`. Внутри директивы подписываюсь на аутпут только если свойству с именем аутпута присвоена функция .\r\n\r\n---\r\n\r\n## Example\r\n\r\n### Component One\r\n\r\n`one.component.ts`\r\n\r\n```ts\r\nimport { Component, EventEmitter } from '@angular/core';\r\n\r\n@Component({\r\n  template: `\r\n    <div>{{ name }}</div>\r\n    <button (click)=\"showMore.emit()\">Show more</div>\r\n  `,\r\n})\r\nexport class OneComponent {\r\n  @Input() name: string;\r\n  @Output() showMore = new EventEmitter<void>();\r\n}\r\n```\r\n\r\n### Component Two\r\n\r\n`two.component.html`\r\n\r\n```html\r\n<ng-container\r\n  [dynamicComponent]=\"component\"\r\n  [inputs]=\"inputs\"\r\n  [outputs]=\"outputs\"\r\n></ng-container>\r\n```\r\n\r\n`two.component.ts`\r\n\r\n```ts\r\nimport { Component } from '@angular/core';\r\nimport OneComponent from '/one.component';\r\n\r\n@Component({...})\r\nexport class TwoComponent {\r\n  component = OneComponent;\r\n  inputs = {\r\n    name: 'Andrey'\r\n  }\r\n  outputs = {\r\n    showMore: () => this.onShowMore();\r\n  }\r\n\r\n  onShowMore() {\r\n    console.log('show more');\r\n  }\r\n}\r\n```\r\n","readmeFilename":"README.md"}