{"id":16244577,"url":"https://github.com/endykaufman/ngx-bind-io","last_synced_at":"2025-03-15T11:31:38.096Z","repository":{"id":34041449,"uuid":"166669305","full_name":"EndyKaufman/ngx-bind-io","owner":"EndyKaufman","description":"Directives for auto binding Input() and Output() from host component to inner in Angular9+ application","archived":false,"fork":false,"pushed_at":"2024-09-06T09:26:48.000Z","size":7002,"stargazers_count":9,"open_issues_count":66,"forks_count":2,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-02-27T00:12:53.935Z","etag":null,"topics":["angular","angular7","auto","bind","binding","class","component","directives","dynamic","extends","hierarchy","inheritance","input","nested","output"],"latest_commit_sha":null,"homepage":"https://endykaufman.github.io/ngx-bind-io/","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/EndyKaufman.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":"2019-01-20T14:15:57.000Z","updated_at":"2021-10-12T10:31:27.000Z","dependencies_parsed_at":"2024-03-27T05:50:00.706Z","dependency_job_id":null,"html_url":"https://github.com/EndyKaufman/ngx-bind-io","commit_stats":{"total_commits":74,"total_committers":2,"mean_commits":37.0,"dds":"0.013513513513513487","last_synced_commit":"0ce15ee4f8e36d2eecc9e2bcb1a2eb88cbb19f26"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EndyKaufman%2Fngx-bind-io","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EndyKaufman%2Fngx-bind-io/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EndyKaufman%2Fngx-bind-io/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EndyKaufman%2Fngx-bind-io/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EndyKaufman","download_url":"https://codeload.github.com/EndyKaufman/ngx-bind-io/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243724959,"owners_count":20337655,"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","angular7","auto","bind","binding","class","component","directives","dynamic","extends","hierarchy","inheritance","input","nested","output"],"created_at":"2024-10-10T14:19:43.520Z","updated_at":"2025-03-15T11:31:37.748Z","avatar_url":"https://github.com/EndyKaufman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-bind-io\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/EndyKaufman/ngx-bind-io.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.org/EndyKaufman/ngx-bind-io.svg?branch=master)](https://travis-ci.org/EndyKaufman/ngx-bind-io)\n[![npm version](https://badge.fury.io/js/ngx-bind-io.svg)](https://badge.fury.io/js/ngx-bind-io)\n\nDirectives for auto binding Input() and Output() from host component to inner in Angular9+ application\n\n- [Example](#example)\n- [Installation](#installation)\n- [Links](#links)\n- [Usage](#usage)\n- [Debug](#debug)\n- [Rules for detect inputs and outputs](#rules-for-detect-inputs-and-outputs)\n- [Bind to dynamic components](#bind-to-dynamic-components)\n- [Work without IVY Renderer](#work-without-ivy-renderer)\n\n## Example\n\nWithout auto binding inputs and outputs\n\n```html\n\u003ccomponent-name (start)=\"onStart()\" [isLoading]=\"isLoading$ | async\" [propA]=\"propA\" [propB]=\"propB\"\u003e \u003c/component-name\u003e\n```\n\nWith auto binding inputs and outputs\n\n```html\n\u003ccomponent-name [bindIO]\u003e \u003c/component-name\u003e\n```\n\n## Installation\n\n```bash\nnpm i --save ngx-bind-io\n```\n\n## Links\n\n[Demo](https://endykaufman.github.io/ngx-bind-io) - Demo application with ngx-bind-io.\n\n[Stackblitz](https://stackblitz.com/edit/ngx-bind-io) - Simply sample of usage on https://stackblitz.com\n\n## Usage\n\napp.module.ts\n\n```js\nimport { NgxBindIOModule } from 'ngx-bind-io';\nimport { InnerComponent } from './inner.component';\nimport { HostComponent } from './host.component';\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    NgxBindIOModule.forRoot(), // in child modules import as \"NgxBindIOModule\"\n    ...\n  ]\n  declarations: [\n    ...\n    InnerComponent,\n    HostComponent\n    ...\n  ],\n  ...\n})\nexport class AppModule { }\n```\n\ninner.component.ts\n\n```js\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n  selector: 'inner',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    \u003cdiv *ngIf=\"isLoading\"\u003eLoading... (5s)\u003c/div\u003e\n    \u003cbutton (click)=\"onStart()\"\u003eStart\u003c/button\u003e \u003cbr /\u003e\n    {{ propA }} \u003cbr /\u003e\n    {{ propB }}\n  `\n})\nexport class InnerComponent {\n  @Input()\n  isLoading: boolean;\n  @Input()\n  propA = 'Prop A: not defined';\n  @Input()\n  propB = 'Prop B: not defined';\n  @Output()\n  start = new EventEmitter();\n  onStart() {\n    this.start.next(true);\n  }\n}\n```\n\nbase-host.component.ts\n\n```js\nimport { BehaviorSubject } from 'rxjs';\n\nexport class BaseHostComponent {\n  isLoading$ = new BehaviorSubject(false);\n  onStart() {\n    this.isLoading$.next(true);\n    setTimeout(() =\u003e this.isLoading$.next(false), 5000);\n  }\n}\n```\n\nhost.component.ts\n\n```js\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { BaseHostComponent } from './base-host.component';\n\n@Component({\n  selector: 'host',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    \u003cinner [bindIO]\u003e\u003c/inner\u003e\n  `\n})\nexport class HostComponent extends BaseHostComponent {\n  propA = 'Prop A: defined';\n  propB = 'Prop B: defined';\n}\n```\n\n## Debug\n\nFor global debug all bindings\n\n```js\nimport { NgxBindIOModule } from 'ngx-bind-io';\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    NgxBindIOModule.forRoot({debug: true})\n    ...\n  ],\n  ...\n})\nexport class AppModule { }\n```\n\nFor debug on one place\n\n```html\n\u003ccomp-name [bindIO]=\"{debug:true}\"\u003e\u003c/comp-name\u003e\n```\n\n## Rules for detect inputs and outputs\n\n### Custom rules for detect output method\n\nmy-ngx-bind-outputs.service.ts\n\n```js\nimport { Injectable } from '@angular/core';\nimport { IBindIO, NgxBindOutputsService } from 'ngx-bind-io';\n\n@Injectable()\nexport class MyNgxBindOutputsService extends NgxBindOutputsService {\n  checkKeyNameToOutputBind(directive: Partial\u003cINgxBindIODirective\u003e, hostKey: string, innerKey: string) {\n    const outputs = directive.outputs;\n    const keyWithFirstUpperLetter =\n      innerKey.length \u003e 0 ? innerKey.charAt(0).toUpperCase() + innerKey.substr(1) : innerKey;\n    return (\n      (hostKey === `on${keyWithFirstUpperLetter}` \u0026\u0026\n        outputs.hostKeys.indexOf(`on${keyWithFirstUpperLetter}Click`) === -1 \u0026\u0026\n        outputs.hostKeys.indexOf(`on${keyWithFirstUpperLetter}ButtonClick`) === -1) ||\n      (hostKey === `on${keyWithFirstUpperLetter}Click` \u0026\u0026\n        outputs.hostKeys.indexOf(`on${keyWithFirstUpperLetter}ButtonClick`) === -1) ||\n      hostKey === `on${keyWithFirstUpperLetter}ButtonClick`\n    );\n  }\n}\n```\n\napp.module.ts\n\n```js\nimport { NgxBindOutputsService, NgxBindIOModule } from 'ngx-bind-io';\nimport { MyNgxBindOutputsService } from './shared/utils/my-ngx-bind-outputs.service';\nimport { InnerComponent } from './inner.component';\nimport { HostComponent } from './host.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    ...\n    NgxBindIOModule,\n    ...\n  ],\n  declarations: [\n    AppComponent,\n    InnerComponent,\n    HostComponent,\n    ...\n  ],\n  providers: [\n    ...\n    { provide: NgxBindOutputsService, useClass: MyNgxBindOutputsService },\n    ...\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n### Default rules for detect output method\n\nngx-bind-outputs.service.ts\n\n```js\nexport class NgxBindOutputsService {\n  ...\n  checkKeyNameToOutputBind(directive: Partial\u003cINgxBindIODirective\u003e, hostKey: string, innerKey: string) {\n    const outputs = directive.outputs;\n    const keyWithFirstUpperLetter = innerKey.length \u003e 0 ? innerKey.charAt(0).toUpperCase() + innerKey.substr(1) : innerKey;\n    return (\n      (hostKey === `on${keyWithFirstUpperLetter}` \u0026\u0026\n        outputs.hostKeys.indexOf(`on${keyWithFirstUpperLetter}Click`) === -1) ||\n      hostKey === `on${keyWithFirstUpperLetter}Click`\n    );\n  }\n  ...\n}\n```\n\n### Default rules for detect inputs variables\n\nngx-bind-inputs.service.ts\n\n```js\nexport class NgxBindInputsService {\n  ...\n  checkKeyNameToInputBind(directive: Partial\u003cINgxBindIODirective\u003e, hostKey: string, innerKey: string) {\n    return hostKey === innerKey \u0026\u0026 hostKey[0] !== '_';\n  }\n  ...\n  checkKeyNameToObservableInputBind(directive: Partial\u003cINgxBindIODirective\u003e, hostKey: string, innerKey: string) {\n    return hostKey === `${innerKey}$` \u0026\u0026 hostKey[0] !== '_';\n  }\n  ...\n}\n```\n\n## Bind to dynamic components\n\nBecouse dynamic components not have normal lifecicle, recomendate define they without OnPush strategy.\n\nIf you want use with OnPush, you may use Inputs with BindObservable and call properties with async pipe.\n\nOr use NgxBindIoService and run method linkHostToInner for bind inputs and outputs.\n\ninner.component.ts\n\n```js\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\n\n@Component({\n  selector: 'inner',\n  // changeDetection: ChangeDetectionStrategy.OnPush, \u003c-- change detection with OnPush strategy incorrected work for dynamic components\n  template: `\n    \u003cdiv *ngIf=\"isLoading\"\u003eLoading... (5s)\u003c/div\u003e\n    \u003cbutton (click)=\"onStart()\"\u003eStart\u003c/button\u003e \u003cbr /\u003e\n    {{ propA }} \u003cbr /\u003e\n    {{ propB }}\n  `\n})\nexport class InnerComponent {\n  @Input()\n  isLoading: boolean = undefined;\n  @Input()\n  propA = 'Prop A: not defined';\n  @Input()\n  propB = 'Prop B: not defined';\n  @Output()\n  start = new EventEmitter();\n  onStart() {\n    this.start.next(true);\n  }\n}\n```\n\nhost.component.ts\n\n```js\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, SkipSelf } from '@angular/core';\nimport { BaseHostComponent } from './base-host.component';\nimport { BehaviorSubject } from 'rxjs';\nimport { InnerComponent } from './inner.component';\n\n@Component({\n  selector: 'host',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    \u003ctemplate #inner\u003e\u003c/template\u003e\n  `\n})\nexport class HostComponent {\n  @ViewChild('inner', { read: ViewContainerRef })\n  inner: ViewContainerRef;\n\n  propA = 'Prop A: defined';\n  propB = 'Prop B: defined';\n  isLoading$ = new BehaviorSubject(false);\n\n  constructor(\n    private _ngxBindIoService: NgxBindIoService,\n    @SkipSelf()\n    private _parentInjector: Injector,\n    private _changeDetectorRef: ChangeDetectorRef,\n    private _resolver: ComponentFactoryResolver\n  ) {\n    this.createInner();\n  }\n  createInner() {\n    this.inner.clear();\n    const factory = this._resolver.resolveComponentFactory(InnerComponent);\n    const componentRef = this.inner.createComponent(factory);\n    this._ngxBindIoService.linkHostToInner(\n      this,\n      componentRef.instance,\n      { propA: this.propA, propB: this.propB },\n      this._parentInjector,\n      this._changeDetectorRef\n    );\n  }\n  onStart() {\n    this.isLoading$.next(true);\n    setTimeout(() =\u003e this.isLoading$.next(false), 5000);\n  }\n}\n```\n\n\n## Work without IVY Renderer\n\n\n**_For correct work without IVY Renderer, all inner Inputs, Outputs and all host properties ​​must be initialized, you can set them to \"undefined\"._**\n\nFor check project ready to use bindIO directives, you may use [ngx-bind-io-cli](https://www.npmjs.com/package/ngx-bind-io-cli) and run:\n\n```bash\nnpx ngx-bind-io-cli ./src --maxInputs=0 --maxOutputs=0\n```\n\nFor check and add initialize statement:\n\n```bash\nnpx ngx-bind-io-cli ./src --fix=all --maxInputs=0 --maxOutputs=0\n```\n\nFor check and add initialize statement if you want correct work with tspath:\n\n```bash\nnpx ngx-bind-io-cli ./src --fix=all --maxInputs=0 --maxOutputs=0  --tsconfig=./src/tsconfig.app.json\n```\n\ninner.component.ts\n\n```js\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { BindIoInner } from 'ngx-bind-io';\n\n@BindIoInner() // \u003c-- need if use not IVY Renderer for correct detect manual inputs like [propName]=\"propValue\"\n@Component({\n  selector: 'inner',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    \u003cdiv *ngIf=\"isLoading\"\u003eLoading... (5s)\u003c/div\u003e\n    \u003cbutton (click)=\"onStart()\"\u003eStart\u003c/button\u003e \u003cbr /\u003e\n    {{ propA }} \u003cbr /\u003e\n    {{ propB }}\n  `\n})\nexport class InnerComponent {\n  @Input()\n  isLoading: boolean = undefined; // if use not IVY Renderer you mast define all inputs and outputs\n  @Input()\n  propA = 'Prop A: not defined';\n  @Input()\n  propB = 'Prop B: not defined';\n  @Output()\n  start = new EventEmitter();\n  onStart() {\n    this.start.next(true);\n  }\n}\n```\n\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fendykaufman%2Fngx-bind-io","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fendykaufman%2Fngx-bind-io","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fendykaufman%2Fngx-bind-io/lists"}