{"id":13580380,"url":"https://github.com/gund/ng-dynamic-component","last_synced_at":"2025-05-13T23:05:25.950Z","repository":{"id":37432069,"uuid":"82212504","full_name":"gund/ng-dynamic-component","owner":"gund","description":"Dynamic components with full life-cycle support for inputs and outputs for Angular","archived":false,"fork":false,"pushed_at":"2025-01-21T21:43:27.000Z","size":126988,"stargazers_count":562,"open_issues_count":1,"forks_count":67,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-04-08T14:03:05.266Z","etag":null,"topics":["angular","component","dynamic","dynamic-components","life-cycle-support","lifecycle","lifecycle-hooks"],"latest_commit_sha":null,"homepage":"https://malkevich-alex.gitbook.io/ng-dynamic-component/","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/gund.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"gund","tidelift":"npm/ng-dynamic-component","issuehunt":"gund","custom":"https://paypal.me/gundua"}},"created_at":"2017-02-16T18:27:31.000Z","updated_at":"2025-03-03T21:05:19.000Z","dependencies_parsed_at":"2025-01-21T22:34:22.922Z","dependency_job_id":null,"html_url":"https://github.com/gund/ng-dynamic-component","commit_stats":{"total_commits":390,"total_committers":19,"mean_commits":"20.526315789473685","dds":"0.34102564102564104","last_synced_commit":"787135c96e2d598084c2e1844b8737fec2f0c301"},"previous_names":[],"tags_count":90,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gund%2Fng-dynamic-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gund%2Fng-dynamic-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gund%2Fng-dynamic-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gund%2Fng-dynamic-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gund","download_url":"https://codeload.github.com/gund/ng-dynamic-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248578871,"owners_count":21127713,"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","component","dynamic","dynamic-components","life-cycle-support","lifecycle","lifecycle-hooks"],"created_at":"2024-08-01T15:01:50.352Z","updated_at":"2025-04-12T14:11:46.926Z","avatar_url":"https://github.com/gund.png","language":"TypeScript","funding_links":["https://patreon.com/gund","https://tidelift.com/funding/github/npm/ng-dynamic-component","https://issuehunt.io/r/gund","https://paypal.me/gundua"],"categories":["TypeScript","Third Party Components"],"sub_categories":["DOM"],"readme":"# ng-dynamic-component\r\n\r\n\u003e Dynamic components with full life-cycle support for inputs and outputs\r\n\r\n[![Release Workflow](https://github.com/gund/ng-dynamic-component/actions/workflows/release.yml/badge.svg)](https://github.com/gund/ng-dynamic-component/actions/workflows/release.yml)\r\n[![Test Workflow](https://github.com/gund/ng-dynamic-component/actions/workflows/test.yml/badge.svg)](https://github.com/gund/ng-dynamic-component/actions/workflows/test.yml)\r\n[![Appveyor](https://ci.appveyor.com/api/projects/status/qwfaor0nnt9l24nj/branch/master?svg=true)](https://ci.appveyor.com/project/gund/ng-dynamic-component/branch/master)\r\n[![Coverage](https://codecov.io/gh/gund/ng-dynamic-component/branch/master/graph/badge.svg?token=BjOghV9KX8)](https://codecov.io/gh/gund/ng-dynamic-component)\r\n[![Maintainability](https://api.codeclimate.com/v1/badges/df4884f0ef7b49c285d0/maintainability)](https://codeclimate.com/github/gund/ng-dynamic-component/maintainability)\r\n[![Npm](https://img.shields.io/npm/v/ng-dynamic-component.svg?maxAge=2592000)](https://badge.fury.io/js/ng-dynamic-component)\r\n[![Npm Downloads](https://img.shields.io/npm/dt/ng-dynamic-component.svg?maxAge=2592000)](https://www.npmjs.com/package/ng-dynamic-component)\r\n[![Licence](https://img.shields.io/npm/l/ng-dynamic-component.svg?maxAge=2592000)](https://github.com/gund/ng-dynamic-component/blob/master/LICENSE)\r\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\r\n\r\n### Hey! There is a [proposal for new API](https://github.com/gund/ng-dynamic-component/discussions/484)!\r\n\r\nSo if you are using this library please give your vote/feedback.\r\n\r\n\u003cdetails\u003e\r\n  \u003csummary\u003eCompatibility with Angular\u003c/summary\u003e\r\n\r\n| Angular  | ng-dynamic-component | NPM package                    |\r\n| -------- | -------------------- | ------------------------------ |\r\n| \u003e=14.1.3 | 10.3.1               | `ng-dynamic-component@^10.3.1` |\r\n| \u003e=14.x.x | 10.2.x               | `ng-dynamic-component@^10.2.0` |\r\n| 13.x.x   | 10.1.x               | `ng-dynamic-component@~10.1.0` |\r\n| 12.x.x   | 9.x.x                | `ng-dynamic-component@^9.0.0`  |\r\n| 11.x.x   | 8.x.x                | `ng-dynamic-component@^8.0.0`  |\r\n| 10.x.x   | 7.x.x                | `ng-dynamic-component@^7.0.0`  |\r\n| 9.x.x    | 6.x.x                | `ng-dynamic-component@^6.0.0`  |\r\n| 8.x.x    | 5.x.x                | `ng-dynamic-component@^5.0.0`  |\r\n| 7.x.x    | 4.x.x                | `ng-dynamic-component@^4.0.0`  |\r\n| 6.x.x    | 3.x.x                | `ng-dynamic-component@^3.0.0`  |\r\n| 5.x.x    | 2.x.x                | `ng-dynamic-component@^2.0.0`  |\r\n| 4.x.x    | 1.x.x                | `ng-dynamic-component@^1.0.0`  |\r\n| 2.x.x    | 0.x.x                | `ng-dynamic-component@^0.0.0`  |\r\n\r\n\u003c/details\u003e\r\n\r\n## Installation\r\n\r\n```bash\r\n$ npm install ng-dynamic-component --save\r\n```\r\n\r\n## Usage\r\n\r\n### DynamicComponent\r\n\r\nImport `DynamicModule` where you need to render dynamic components:\r\n\r\n```ts\r\nimport { DynamicModule } from 'ng-dynamic-component';\r\n\r\n@NgModule({\r\n  imports: [DynamicModule],\r\n})\r\nexport class MyModule {}\r\n```\r\n\r\nThen in your component's template include `\u003cndc-dynamic\u003e` where you want to render component\r\nand bind from your component class type of component to render:\r\n\r\n```ts\r\n@Component({\r\n  selector: 'my-component',\r\n  template: ` \u003cndc-dynamic [ndcDynamicComponent]=\"component\"\u003e\u003c/ndc-dynamic\u003e `,\r\n})\r\nclass MyComponent {\r\n  component = Math.random() \u003e 0.5 ? MyDynamicComponent1 : MyDynamicComponent2;\r\n}\r\n```\r\n\r\n#### Standalone API\r\n\r\n**Since v10.7.0**\r\n\r\nYou may use `\u003cndc-dynamic\u003e` as a standalone component:\r\n\r\n```ts\r\nimport { DynamicComponent } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: ` \u003cndc-dynamic [ndcDynamicComponent]=\"component\"\u003e\u003c/ndc-dynamic\u003e `,\r\n  imports: [DynamicComponent],\r\n  standalone: true,\r\n})\r\nclass MyComponent {\r\n  component = Math.random() \u003e 0.5 ? MyDynamicComponent1 : MyDynamicComponent2;\r\n}\r\n```\r\n\r\n_NOTE:_ Hovewer you should be aware that this will only import `\u003cndc-dynamic\u003e`\r\ninto your component and nothing else so things like dynamic inputs/outputs\r\nwill not work and you will have to import them separately (see their respective sections).\r\n\r\nIf you still need to use both `\u003cndc-dynamic\u003e` and dynamic inputs/outputs it is recommended\r\nto keep using `DynamicModule` API.\r\n\r\n### NgComponentOutlet\r\n\r\nYou can also use [`NgComponentOutlet`](https://angular.io/api/common/NgComponentOutlet)\r\ndirective from `@angular/common` instead of `\u003cndc-dynamic\u003e`.\r\n\r\nImport `DynamicIoModule` where you need to render dynamic inputs:\r\n\r\n```ts\r\nimport { DynamicIoModule } from 'ng-dynamic-component';\r\n\r\n@NgModule({\r\n  imports: [DynamicIoModule],\r\n})\r\nexport class MyModule {}\r\n```\r\n\r\nNow apply `ndcDynamicInputs` and `ndcDynamicOutputs` to `ngComponentOutlet`:\r\n\r\n```ts\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\u003cng-template [ngComponentOutlet]=\"component\"\r\n                           [ndcDynamicInputs]=\"inputs\"\r\n                           [ndcDynamicOutputs]=\"outputs\"\r\n                           \u003e\u003c/ng-template\u003e`\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  inputs = {...};\r\n  outputs = {...};\r\n}\r\n```\r\n\r\nAlso you can use `ngComponentOutlet` with `*` syntax:\r\n\r\n```ts\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\u003cng-container *ngComponentOutlet=\"component;\r\n                            ndcDynamicInputs: inputs;\r\n                            ndcDynamicOutputs: outputs\"\r\n                            \u003e\u003c/ng-container\u003e`\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  inputs = {...};\r\n  outputs = {...};\r\n}\r\n```\r\n\r\n#### Standalone API\r\n\r\n**Since v10.7.0**\r\n\r\nYou may use dynamic inputs/outputs with `*ngComponentOutlet` as a standalone API:\r\n\r\n```ts\r\nimport { ComponentOutletInjectorModule } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\u003cng-container *ngComponentOutlet=\"component;\r\n                            ndcDynamicInputs: inputs;\r\n                            ndcDynamicOutputs: outputs\"\r\n                            \u003e\u003c/ng-container\u003e`\r\n  imports: [ComponentOutletInjectorModule],\r\n  standalone: true,\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  inputs = {...};\r\n  outputs = {...};\r\n}\r\n```\r\n\r\nIf you want to use standard dynamic inputs/outputs with `ngComponentOutlet` as a standalone API\r\nyou need to add the `DynamicIoDirective` to your imports:\r\n\r\n```ts\r\nimport { DynamicIoDirective, ComponentOutletInjectorModule } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\u003cng-container *ngComponentOutlet=\"component;\r\n                            ndcDynamicInputs: inputs;\r\n                            ndcDynamicOutputs: outputs\"\r\n                            \u003e\u003c/ng-container\u003e`\r\n  imports: [DynamicIoDirective, ComponentOutletInjectorModule],\r\n  standalone: true,\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  inputs = {...};\r\n  outputs = {...};\r\n}\r\n```\r\n\r\n### Inputs and Outputs\r\n\r\nYou can pass `inputs` and `outputs` to your dynamic components:\r\n\r\nImport module `DynamicIoModule` and then in template:\r\n\r\n```ts\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cndc-dynamic\r\n      [ndcDynamicComponent]=\"component\"\r\n      [ndcDynamicInputs]=\"inputs\"\r\n      [ndcDynamicOutputs]=\"outputs\"\r\n    \u003e\u003c/ndc-dynamic\u003e\r\n  `,\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  inputs = {\r\n    hello: 'world',\r\n    something: () =\u003e 'can be really complex',\r\n  };\r\n  outputs = {\r\n    onSomething: (type) =\u003e alert(type),\r\n  };\r\n}\r\n\r\n@Component({\r\n  selector: 'my-dynamic-component1',\r\n  template: 'Dynamic Component 1',\r\n})\r\nclass MyDynamicComponent1 {\r\n  @Input()\r\n  hello: string;\r\n  @Input()\r\n  something: Function;\r\n  @Output()\r\n  onSomething = new EventEmitter\u003cstring\u003e();\r\n}\r\n```\r\n\r\nHere you can update your inputs (ex. `inputs.hello = 'WORLD'`) and they will trigger standard Angular's life-cycle hooks\r\n(of course you should consider which change detection strategy you are using).\r\n\r\n#### Standalone API\r\n\r\n**Since v10.7.0**\r\n\r\nYou can use standalone API to pass dynamic inputs/outputs\r\nusing `DynamicIoDirective` with `DynamicComponent` or `ngComponentOutlet`:\r\n\r\n```ts\r\nimport { DynamicIoDirective, DynamicComponent } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cndc-dynamic\r\n      [ndcDynamicComponent]=\"component\"\r\n      [ndcDynamicInputs]=\"inputs\"\r\n      [ndcDynamicOutputs]=\"outputs\"\r\n    \u003e\u003c/ndc-dynamic\u003e\r\n  `,\r\n  imports: [DynamicIoDirective, DynamicComponent]\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  inputs = {...};\r\n  outputs = {...};\r\n}\r\n```\r\n\r\n#### Output template variables\r\n\r\n**Since v6.1.0**\r\n\r\nWhen you want to provide some values to your output handlers from template -\r\nyou can do so by supplying a special object to your output that has shape `{handler: fn, args: []}`:\r\n\r\n```ts\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cndc-dynamic\r\n      [ndcDynamicComponent]=\"component\"\r\n      [ndcDynamicOutputs]=\"{\r\n        onSomething: { handler: doSomething, args: ['$event', tplVar] }\r\n      }\"\r\n    \u003e\u003c/ndc-dynamic\u003e\r\n  `,\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  tplVar = 'some value';\r\n  doSomething(event, tplValue) {}\r\n}\r\n```\r\n\r\nHere you can specify at which argument event value should arrive via `'$event'` literal.\r\n\r\n_HINT:_ You can override event literal by providing\r\n[`IoEventArgumentToken`](projects/ng-dynamic-component/src/lib/io/event-argument.ts) in DI.\r\n\r\n#### Output Handler Context\r\n\r\n**Since v10.4.0**\r\n\r\nYou can specify the context (`this`) that will be used when calling\r\nthe output handlers by providing either:\r\n\r\n- [`IoEventContextToken`](projects/ng-dynamic-component/src/lib/io/event-context.ts) - which will be;\r\n  injected and used directly as a context value\r\n- [`IoEventContextProviderToken`](projects/ng-dynamic-component/src/lib/io/event-context.ts) - which\r\n  will be provided and instantiated within the `IoService` and used as a context value.  \r\n  This useful if you have some generic way of retrieving a\r\n  context for every dynamic component so you may encapsulate\r\n  it in an Angular DI provider that will be instantiated\r\n  within every component's injector;\r\n\r\nExample using your component as an output context:\r\n\r\n```ts\r\nimport { IoEventContextToken } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cndc-dynamic\r\n      [ndcDynamicComponent]=\"component\"\r\n      [ndcDynamicOutputs]=\"{\r\n        onSomething: doSomething\r\n      }\"\r\n    \u003e\u003c/ndc-dynamic\u003e\r\n  `,\r\n  providers: [\r\n    {\r\n      provide: IoEventContextToken,\r\n      useExisting: MyComponent,\r\n    },\r\n  ],\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  doSomething(event) {\r\n    // Here `this` will be an instance of `MyComponent`\r\n  }\r\n}\r\n```\r\n\r\n### Component Creation Events\r\n\r\nYou can subscribe to component creation events, being passed a reference to the `ComponentRef`:\r\n\r\n```ts\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cndc-dynamic\r\n      [ndcDynamicComponent]=\"component\"\r\n      (ndcDynamicCreated)=\"componentCreated($event)\"\r\n    \u003e\u003c/ndc-dynamic\u003e\r\n  `,\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  componentCreated(compRef: ComponentRef\u003cany\u003e) {\r\n    // utilize compRef in some way ...\r\n  }\r\n}\r\n```\r\n\r\n### Attributes\r\n\r\n**Since v2.2.0** you can now declaratively set attributes, as you would inputs, via `ndcDynamicAttributes`.\r\n\r\nImport module `DynamicAttributesModule` and then in template:\r\n\r\n```ts\r\nimport { AttributesMap } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cndc-dynamic\r\n      [ndcDynamicComponent]=\"component\"\r\n      [ndcDynamicAttributes]=\"attrs\"\r\n    \u003e\u003c/ndc-dynamic\u003e\r\n  `,\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  attrs: AttributesMap = {\r\n    'my-attribute': 'attribute-value',\r\n    class: 'some classes',\r\n  };\r\n}\r\n```\r\n\r\nRemember that attributes values are always strings (while inputs can be any value).\r\nSo to have better type safety you can use `AttributesMap` interface for your attributes maps.\r\n\r\nAlso you can use `ngComponentOutlet` and `ndcDynamicAttributes` with `*` syntax:\r\n\r\n```ts\r\nimport { AttributesMap } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cng-container\r\n      *ngComponentOutlet=\"component; ndcDynamicAttributes: attrs\"\r\n    \u003e\u003c/ng-container\u003e\r\n  `,\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  attrs: AttributesMap = {\r\n    'my-attribute': 'attribute-value',\r\n    class: 'some classes',\r\n  };\r\n}\r\n```\r\n\r\n#### Standalone API\r\n\r\n**Since v10.7.0**\r\n\r\nYou can use standalone API to pass dynamic inputs/outputs\r\nusing `DynamicAttributesDirective` with `DynamicComponent` or `ngComponentOutlet`:\r\n\r\n```ts\r\nimport { DynamicAttributesDirective, DynamicComponent } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cndc-dynamic\r\n      [ndcDynamicComponent]=\"component\"\r\n      [ndcDynamicAttributes]=\"attrs\"\r\n    \u003e\u003c/ndc-dynamic\u003e\r\n  `,\r\n  imports: [DynamicAttributesDirective, DynamicComponent]\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  attrs: AttributesMap = {...};\r\n}\r\n```\r\n\r\n### Directives (experimental)\r\n\r\n**Since v3.1.0** you can now declaratively set directives, via `ndcDynamicDirectives`.\r\n\r\n\u003e **NOTE**:\r\n\u003e There is a known issue with OnChanges hook not beign triggered on dynamic directives\r\n\u003e since this part of functionality has been removed from the core as Angular now\r\n\u003e supports this out of the box for dynamic components.\r\n\u003e\r\n\u003e In dynamic directives queries like `@ContentChild` and host decorators like `@HostBinding`\r\n\u003e will not work due to involved complexity required to implement it (but PRs are welcome!).\r\n\r\nImport module `DynamicDirectivesModule` and then in template:\r\n\r\n```ts\r\nimport { dynamicDirectiveDef } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cng-container\r\n      [ngComponentOutlet]=\"component\"\r\n      [ndcDynamicDirectives]=\"dirs\"\r\n    \u003e\u003c/ng-container\u003e\r\n  `,\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  dirs = [dynamicDirectiveDef(MyDirective)];\r\n}\r\n```\r\n\r\nIt's also possible to bind inputs and outputs to every dynamic directive:\r\n\r\n```ts\r\nimport { dynamicDirectiveDef } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cng-container\r\n      [ngComponentOutlet]=\"component\"\r\n      [ndcDynamicDirectives]=\"dirs\"\r\n    \u003e\u003c/ng-container\u003e\r\n  `,\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  directiveInputs = { prop1: 'value' };\r\n  directiveOutputs = { output1: (evt) =\u003e this.doSomeStuff(evt) };\r\n  dirs = [\r\n    dynamicDirectiveDef(\r\n      MyDirective,\r\n      this.directiveInputs,\r\n      this.directiveOutputs,\r\n    ),\r\n  ];\r\n}\r\n```\r\n\r\nTo change inputs, just update the object:\r\n\r\n```ts\r\nclass MyComponent {\r\n  updateDirectiveInput() {\r\n    this.directiveInputs.prop1 = 'new value';\r\n  }\r\n}\r\n```\r\n\r\nYou can have multiple directives applied to same dynamic component (only one directive by same type):\r\n\r\n```ts\r\nimport { dynamicDirectiveDef } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cng-container\r\n      [ngComponentOutlet]=\"component\"\r\n      [ndcDynamicDirectives]=\"dirs\"\r\n    \u003e\u003c/ng-container\u003e\r\n  `,\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  dirs = [\r\n    dynamicDirectiveDef(MyDirective1),\r\n    dynamicDirectiveDef(MyDirective2),\r\n    dynamicDirectiveDef(MyDirective3),\r\n    dynamicDirectiveDef(MyDirective1), // This will be ignored because MyDirective1 already applied above\r\n  ];\r\n}\r\n```\r\n\r\n#### Standalone API\r\n\r\n**Since v10.7.0**\r\n\r\nYou can use standalone API to pass dynamic inputs/outputs\r\nusing `DynamicDirectivesDirective` with `DynamicComponent` or `ngComponentOutlet`:\r\n\r\n```ts\r\nimport { DynamicDirectivesDirective, DynamicComponent } from 'ng-dynamic-component';\r\n\r\n@Component({\r\n  selector: 'my-component',\r\n  template: `\r\n    \u003cng-container\r\n      [ngComponentOutlet]=\"component\"\r\n      [ndcDynamicDirectives]=\"dirs\"\r\n    \u003e\u003c/ng-container\u003e\r\n  `,\r\n  imports: [DynamicDirectivesDirective, DynamicComponent]\r\n})\r\nclass MyComponent {\r\n  component = MyDynamicComponent1;\r\n  dirs = [...];\r\n}\r\n```\r\n\r\n### Extra\r\n\r\nYou can have more advanced stuff over your dynamically rendered components like setting custom injector (`[ndcDynamicInjector]`)\r\nor providing additional/overriding providers (`[ndcDynamicProviders]`) or both simultaneously\r\nor projecting nodes (`[ndcDynamicContent]`).\r\n\r\n**Since v10.6.0**: You can provide custom NgModuleRef (`[ndcDynamicNgModuleRef]`)\r\nor EnvironmentInjector (`[ndcDynamicEnvironmentInjector]`) for your dynamic component.\r\n\r\n---\r\n\r\nNOTE: In practice functionality of this library is split in two pieces:\r\n\r\n- one - component (`ndc-dynamic`) that is responsible for instantiating and rendering of dynamic components;\r\n- two - directive (`ndcDynamic` also bound to `ndc-dynamic`) that is responsible for carrying inputs/outputs\r\n  to/from dynamic component by the help of so called\r\n  [`DynamicComponentInjector`](projects/ng-dynamic-component/src/lib/component-injector/token.ts).\r\n\r\nThanks to this separation you are able to connect inputs/outputs and life-cycle hooks to different mechanisms of injecting\r\ndynamic components by implementing `DynamicComponentInjector` and providing it via\r\n[`DynamicComponentInjectorToken`](projects/ng-dynamic-component/src/lib/component-injector/token.ts) in DI.\r\n\r\nIt was done to be able to reuse [`NgComponentOutlet`](https://github.com/angular/angular/commit/8578682) added in Angular 4-beta.3.\r\n\r\nTo see example of how to implement custom component injector - see\r\n[`ComponentOutletInjectorDirective`](projects/ng-dynamic-component/src/lib/component-injector/component-outlet-injector.directive.ts)\r\nthat is used to integrate `NgComponentOutlet` directive with inputs/outputs.\r\n\r\n## Contributing\r\n\r\nYou are welcome to contribute to this project.\r\nSimply follow the [contribution guide](/CONTRIBUTING.md).\r\n\r\n## License\r\n\r\nMIT © [Alex Malkevich](malkevich.alex@gmail.com)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgund%2Fng-dynamic-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgund%2Fng-dynamic-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgund%2Fng-dynamic-component/lists"}