{"id":24131573,"url":"https://github.com/indigosoft/ngxd","last_synced_at":"2025-05-16T19:04:49.617Z","repository":{"id":31503193,"uuid":"123720700","full_name":"Indigosoft/ngxd","owner":"Indigosoft","description":"✨🦊 NgComponentOutlet + Data-Binding + Full Lifecycle = NgxComponentOutlet for Angular 7, 8, 9, 10, 11, 12, 13, 14, 15, 16+","archived":false,"fork":false,"pushed_at":"2024-01-30T19:05:32.000Z","size":4142,"stargazers_count":322,"open_issues_count":23,"forks_count":31,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-16T19:04:16.319Z","etag":null,"topics":["angular","dynamic-components"],"latest_commit_sha":null,"homepage":"","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/Indigosoft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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}},"created_at":"2018-03-03T18:38:38.000Z","updated_at":"2025-04-03T11:10:13.000Z","dependencies_parsed_at":"2024-06-18T16:48:09.032Z","dependency_job_id":"b39afb9d-808b-47c5-9853-76d5593ef115","html_url":"https://github.com/Indigosoft/ngxd","commit_stats":{"total_commits":126,"total_committers":5,"mean_commits":25.2,"dds":0.08730158730158732,"last_synced_commit":"f184dec7f819458ba094cfecc4f9debae6c72f47"},"previous_names":["thekiba/ngx-component-outlet"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Indigosoft%2Fngxd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Indigosoft%2Fngxd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Indigosoft%2Fngxd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Indigosoft%2Fngxd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Indigosoft","download_url":"https://codeload.github.com/Indigosoft/ngxd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254592368,"owners_count":22097011,"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","dynamic-components"],"created_at":"2025-01-11T21:18:07.948Z","updated_at":"2025-05-16T19:04:49.556Z","avatar_url":"https://github.com/Indigosoft.png","language":"TypeScript","readme":"# ✨🦊 NGX Dynamic for Angular Ivy and Angular 7, 8, 9, 10, 11, 12, 13, 14, 15, 16+\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/IndigoSoft/ngxd/raw/master/images/ngxd-5-minutes.png\" width=\"882px\" alt=\"preview\"\u003e\n\u003c/p\u003e\n\n\u003e 🥳 Best way to quickly use Dynamic Components with [Angular](https://angular.io/)\n\n[![Npm](https://img.shields.io/npm/v/@ngxd/core.svg?style=flat-square\u0026maxAge=300)](https://www.npmjs.com/package/@ngxd/core)\n[![Npm Downloads](https://img.shields.io/npm/dt/@ngxd/core.svg?style=flat-square\u0026maxAge=300)](https://www.npmjs.com/package/@ngxd/core)\n[![Npm Downloads Weekly](https://img.shields.io/npm/dw/@ngxd/core.svg?style=flat-square\u0026maxAge=300)](https://www.npmjs.com/package/@ngxd/core)\n[![Travis](https://img.shields.io/travis/com/IndigoSoft/ngxd.svg?style=flat-square\u0026maxAge=300)](https://travis-ci.com/IndigoSoft/ngxd)\n[![Licence](https://img.shields.io/npm/l/@ngxd/core.svg?style=flat-square\u0026maxAge=300)](https://github.com/IndigoSoft/ngxd/blob/master/LICENSE)\n\n[![GitHub Contributors](https://img.shields.io/github/contributors/IndigoSoft/ngxd.svg?style=flat-square\u0026maxAge=300)](https://github.com/IndigoSoft/ngxd/graphs/contributors)\n[![GitHub PR](https://img.shields.io/github/issues-pr/IndigoSoft/ngxd.svg?style=flat-square\u0026maxAge=300)](https://github.com/IndigoSoft/ngxd/pulls)\n[![GitHub Issue](https://img.shields.io/github/issues/IndigoSoft/ngxd.svg?style=flat-square\u0026maxAge=300)](https://github.com/IndigoSoft/ngxd/issues)\n[![GitHub Stars](https://img.shields.io/github/stars/IndigoSoft/ngxd.svg?style=flat-square\u0026label=GitHub%20Stars\u0026maxAge=300)](https://github.com/IndigoSoft/ngxd)\n\nUse like ```NgComponentOutlet``` but with ```@Input``` and ```@Output``` auto bindings:\n\n```html\n\u003cng-container *ngxComponentOutlet=\"component\"\u003e\u003c/ng-container\u003e\n```\n\nHere is a [demo example](https://stackblitz.com/edit/angular-simple-dynamic) showing NGX Dynamic and Angular in action.\n\n* [Getting started](#getting-started)\n* [Use cases](#use-cases)\n    * [1. Binding inputs and outputs](#1-binding-inputs-and-outputs)\n    * [2. Switching the component](#2-switching-the-component)\n    * [3. Lazy loading the dynamic component](#3-lazy-loading-the-dynamic-component)\n    * [4. Content projection](#4-content-projection)\n\n\n# Getting started\n\n## Step 1: Install ```@ngxd/core```:\n\n```bash\nnpm install --save @ngxd/core\n# or\nyarn add @ngxd/core\n```\n\n\u003e Note: @ngxd/core@12 only supports angular with Ivy is enabled\n\n\u003e Note: If you want to use @ngxd/core with a specific angular version, you have to install @ngxd/core which version you need:\n\u003e *  @angular/core@7  =\u003e npm install @ngxd/core@7\n\u003e *  @angular/core@8  =\u003e npm install @ngxd/core@8\n\u003e *  @angular/core@9  =\u003e npm install @ngxd/core@9\n\u003e *  @angular/core@10 =\u003e npm install @ngxd/core@10\n\u003e *  @angular/core@11 =\u003e npm install @ngxd/core@11\n\u003e *  @angular/core@12 =\u003e npm install @ngxd/core@12\n\u003e *  @angular/core@13 =\u003e npm install @ngxd/core@13\n\u003e *  @angular/core@14 =\u003e npm install @ngxd/core@14\n\u003e *  @angular/core@15 =\u003e npm install @ngxd/core@15\n\u003e *  @angular/core@16 =\u003e npm install @ngxd/core@16\n\n## Step 2: Import the NgxdModule:\n\n```typescript\nimport { NgxdModule } from '@ngxd/core';\n\n@NgModule({\n  declarations: [ AppComponent ],\n  // have import NgxdModule here 👇\n  imports: [ BrowserModule, NgxdModule ],\n  bootstrap: [ AppComponent ]\n})\nexport class AppModule {}\n```\n\n## Step 3: Use NgxComponentOutlet directly:\n\n```typescript\n@Component({\n  template: `\n    \u003cng-container *ngxComponentOutlet=\"component\"\u003e\u003c/ng-container\u003e`\n    // using @ngxd/core 👆\n})\nclass MyComponent {  \n  // your dynamic component 👇\n  component = DynamicComponent;\n\n  // 🥳 inputs and outputs will binding automatically\n  @Input() entity;\n  @Output() action;\n}\n```\n\n\n# Use cases\n\nThere are several modes of operation of the directive.\n\n## 1. Binding inputs and outputs\nA simple variant of binding through the parent component.\n```typescript\n@Component({\n  template: `\n    \u003cng-container *ngxComponentOutlet=\"component\"\u003e\u003c/ng-container\u003e`\n    // using @ngxd/core 👆\n})\nclass MyComponent {  \n  // your dynamic component 👇\n  component = DynamicComponent;\n\n  // 🥳 inputs and outputs will binding automatically\n  @Input() entity;\n  @Output() action;\n}\n```\n\n### Binding inputs through the context\n\u003e Note: You not permitted to passing the outputs using the context.\n\u003e The context will be passing inputs only.\n\nIn the example below, you can see the binding through the context. This is useful when you need to display something through *ngFor. Note that the context has a higher priority than the inputs in the component.\n```html\n\u003cng-container *ngFor=\"let color of colors\"\n  \u003cng-container *ngxComponentOutlet=\"\n      component; context: { color: color }\n  \"\u003e\u003c/ng-container\u003e\n\u003c/ng-container\u003e\n```\n\n## 2. Switching the component\nTo switch a component, you just need to overwrite it with another one.\n```typescript\nclass AppComponent {\n  ngOnChanges(changes: SimpleChanges): void {\n    if ('type' in changes) {\n      switch (this.type) {\n        case 'number':\n          this.component = NumberComponent;\n          break;\n        case 'text':\n          this.component = TextComponent;\n          break;\n        default:\n          this.component = DefaultComponent;\n      }\n    }\n  }\n}\n```\n\n### Switching the component using pipe and resolver\nIf you have a bunch of components, then you go to switch between them. To do this, you can use NgxdResolvePipe and NgxdResolver to help you isolate dynamic component selection.\n```html\n\u003cng-container *ngxComponentOutlet=\"\n    resolver | resolve : type\n\"\u003e\u003c/ng-container\u003e\n```\n\n## 3. Lazy loading the dynamic component\nIf you need to load and display a dynamic component lazily, then you can use lazy import and pass it to the async pipe.\n\n```typescript\ncomponent = import('./my-lazy-component')\n  .then(m =\u003e m.MyLazyComponent);\n```\n\n```html\n\u003cng-container *ngxComponentOutlet=\"\n    component | async\n\"\u003e\u003c/ng-container\u003e\n```\n\n### Lazy loading bunch of dynamic components\nYou can also load a bunch of components lazily and render them.\n\n```typescript\nresolver = import('./my-lazy-resolver')\n  .then(m =\u003e m.myLazyResolver);\n```\n\n```html\n\u003cng-container *ngxComponentOutlet=\"\n    resolver | async | resolve : type\n\"\u003e\u003c/ng-container\u003e\n```\n\n## 4. Content projection\nIf you want to use the ```\u003cng-content\u003e``` and pass the content to your dynamic component, you have to check the example below.\n\n[Click to here](https://github.com/IndigoSoft/ngxd/issues/30#issuecomment-627472367)\n\n\n# Comparison\n\n| Feature                | NgxComponentOutlet | ComponentFactoryResolver | NgComponentOutlet |\n| ---------------------- | ------------------ | ------------------------ | ----------------- |\n| Friendliness           |  ⭐⭐⭐            | ⭐                       | ⭐⭐              |\n| Dynamic Components     |  ✅                | ✅                       | ✅                |\n| AOT support            |  ✅                | ✅                       | ✅                |\n| Reactivity             |  ✅                | ✅                       | ✅                |\n| Injector               |  ✅                | ✅                       | ✅                |\n| NgModule               |  ✅                | ✅                       | ✅                |\n| projectionNodes        |  ✅                | ✅                       | ✅                |\n| Component Access       |  ✅                | ✅                       | ❌                |\n| Lifecycle OnChanges    |  ✅                | ⭕️ manually              | ❌                |\n| Binding ```@Input()``` |  ✅                | ⭕️ manually              | ❌                |\n| Binding ```@Output()```|  ✅                | ⭕️ manually              | ❌                |\n| Activate Event         |  ✅                | ⭕️ manually              | ❌                |\n| Deactivate Event       |  ✅                | ⭕️ manually              | ❌                |\n\n\n# API\n\n| Input                                     | Type                       | Default | Required | Description |\n| ----------------------------------------- | -------------------------- | ------- | -------- | ----------- |\n| ```[ngxComponentOutlet]```                | ```Type\u003cany\u003e```            | n/a     | yes      |             |\n| ```[ngxComponentOutletContext]```         | ```any```                  | n/a     | no       |             |\n| ```[ngxComponentOutletInjector]```        | ```Injector```             | n/a     | no       |             |\n| ```[ngxComponentOutletContent]```         | ```any[][]```              | n/a     | no       |             |\n\n\n| Output                                    | Type                       | Description |\n| ----------------------------------------- | -------------------------- | ----------- |\n| ```(ngxComponentOutletActivate)```        | ```any```                  |             |\n| ```(ngxComponentOutletDeactivate)```      | ```any```                  |             |\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findigosoft%2Fngxd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findigosoft%2Fngxd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findigosoft%2Fngxd/lists"}