https://github.com/endykaufman/ngx-bind-io
Directives for auto binding Input() and Output() from host component to inner in Angular9+ application
https://github.com/endykaufman/ngx-bind-io
angular angular7 auto bind binding class component directives dynamic extends hierarchy inheritance input nested output
Last synced: about 1 year ago
JSON representation
Directives for auto binding Input() and Output() from host component to inner in Angular9+ application
- Host: GitHub
- URL: https://github.com/endykaufman/ngx-bind-io
- Owner: EndyKaufman
- License: mit
- Created: 2019-01-20T14:15:57.000Z (over 7 years ago)
- Default Branch: develop
- Last Pushed: 2024-09-06T09:26:48.000Z (over 1 year ago)
- Last Synced: 2025-02-27T00:12:53.935Z (over 1 year ago)
- Topics: angular, angular7, auto, bind, binding, class, component, directives, dynamic, extends, hierarchy, inheritance, input, nested, output
- Language: TypeScript
- Homepage: https://endykaufman.github.io/ngx-bind-io/
- Size: 6.68 MB
- Stars: 9
- Watchers: 2
- Forks: 2
- Open Issues: 66
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-bind-io
[](https://greenkeeper.io/)
[](https://travis-ci.org/EndyKaufman/ngx-bind-io)
[](https://badge.fury.io/js/ngx-bind-io)
Directives for auto binding Input() and Output() from host component to inner in Angular9+ application
- [Example](#example)
- [Installation](#installation)
- [Links](#links)
- [Usage](#usage)
- [Debug](#debug)
- [Rules for detect inputs and outputs](#rules-for-detect-inputs-and-outputs)
- [Bind to dynamic components](#bind-to-dynamic-components)
- [Work without IVY Renderer](#work-without-ivy-renderer)
## Example
Without auto binding inputs and outputs
```html
```
With auto binding inputs and outputs
```html
```
## Installation
```bash
npm i --save ngx-bind-io
```
## Links
[Demo](https://endykaufman.github.io/ngx-bind-io) - Demo application with ngx-bind-io.
[Stackblitz](https://stackblitz.com/edit/ngx-bind-io) - Simply sample of usage on https://stackblitz.com
## Usage
app.module.ts
```js
import { NgxBindIOModule } from 'ngx-bind-io';
import { InnerComponent } from './inner.component';
import { HostComponent } from './host.component';
@NgModule({
...
imports: [
...
NgxBindIOModule.forRoot(), // in child modules import as "NgxBindIOModule"
...
]
declarations: [
...
InnerComponent,
HostComponent
...
],
...
})
export class AppModule { }
```
inner.component.ts
```js
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'inner',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
Loading... (5s)
Start
{{ propA }}
{{ propB }}
`
})
export class InnerComponent {
@Input()
isLoading: boolean;
@Input()
propA = 'Prop A: not defined';
@Input()
propB = 'Prop B: not defined';
@Output()
start = new EventEmitter();
onStart() {
this.start.next(true);
}
}
```
base-host.component.ts
```js
import { BehaviorSubject } from 'rxjs';
export class BaseHostComponent {
isLoading$ = new BehaviorSubject(false);
onStart() {
this.isLoading$.next(true);
setTimeout(() => this.isLoading$.next(false), 5000);
}
}
```
host.component.ts
```js
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { BaseHostComponent } from './base-host.component';
@Component({
selector: 'host',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
`
})
export class HostComponent extends BaseHostComponent {
propA = 'Prop A: defined';
propB = 'Prop B: defined';
}
```
## Debug
For global debug all bindings
```js
import { NgxBindIOModule } from 'ngx-bind-io';
@NgModule({
...
imports: [
...
NgxBindIOModule.forRoot({debug: true})
...
],
...
})
export class AppModule { }
```
For debug on one place
```html
```
## Rules for detect inputs and outputs
### Custom rules for detect output method
my-ngx-bind-outputs.service.ts
```js
import { Injectable } from '@angular/core';
import { IBindIO, NgxBindOutputsService } from 'ngx-bind-io';
@Injectable()
export class MyNgxBindOutputsService extends NgxBindOutputsService {
checkKeyNameToOutputBind(directive: Partial, hostKey: string, innerKey: string) {
const outputs = directive.outputs;
const keyWithFirstUpperLetter =
innerKey.length > 0 ? innerKey.charAt(0).toUpperCase() + innerKey.substr(1) : innerKey;
return (
(hostKey === `on${keyWithFirstUpperLetter}` &&
outputs.hostKeys.indexOf(`on${keyWithFirstUpperLetter}Click`) === -1 &&
outputs.hostKeys.indexOf(`on${keyWithFirstUpperLetter}ButtonClick`) === -1) ||
(hostKey === `on${keyWithFirstUpperLetter}Click` &&
outputs.hostKeys.indexOf(`on${keyWithFirstUpperLetter}ButtonClick`) === -1) ||
hostKey === `on${keyWithFirstUpperLetter}ButtonClick`
);
}
}
```
app.module.ts
```js
import { NgxBindOutputsService, NgxBindIOModule } from 'ngx-bind-io';
import { MyNgxBindOutputsService } from './shared/utils/my-ngx-bind-outputs.service';
import { InnerComponent } from './inner.component';
import { HostComponent } from './host.component';
@NgModule({
declarations: [AppComponent],
imports: [
...
NgxBindIOModule,
...
],
declarations: [
AppComponent,
InnerComponent,
HostComponent,
...
],
providers: [
...
{ provide: NgxBindOutputsService, useClass: MyNgxBindOutputsService },
...
],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### Default rules for detect output method
ngx-bind-outputs.service.ts
```js
export class NgxBindOutputsService {
...
checkKeyNameToOutputBind(directive: Partial, hostKey: string, innerKey: string) {
const outputs = directive.outputs;
const keyWithFirstUpperLetter = innerKey.length > 0 ? innerKey.charAt(0).toUpperCase() + innerKey.substr(1) : innerKey;
return (
(hostKey === `on${keyWithFirstUpperLetter}` &&
outputs.hostKeys.indexOf(`on${keyWithFirstUpperLetter}Click`) === -1) ||
hostKey === `on${keyWithFirstUpperLetter}Click`
);
}
...
}
```
### Default rules for detect inputs variables
ngx-bind-inputs.service.ts
```js
export class NgxBindInputsService {
...
checkKeyNameToInputBind(directive: Partial, hostKey: string, innerKey: string) {
return hostKey === innerKey && hostKey[0] !== '_';
}
...
checkKeyNameToObservableInputBind(directive: Partial, hostKey: string, innerKey: string) {
return hostKey === `${innerKey}$` && hostKey[0] !== '_';
}
...
}
```
## Bind to dynamic components
Becouse dynamic components not have normal lifecicle, recomendate define they without OnPush strategy.
If you want use with OnPush, you may use Inputs with BindObservable and call properties with async pipe.
Or use NgxBindIoService and run method linkHostToInner for bind inputs and outputs.
inner.component.ts
```js
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'inner',
// changeDetection: ChangeDetectionStrategy.OnPush, <-- change detection with OnPush strategy incorrected work for dynamic components
template: `
Loading... (5s)
Start
{{ propA }}
{{ propB }}
`
})
export class InnerComponent {
@Input()
isLoading: boolean = undefined;
@Input()
propA = 'Prop A: not defined';
@Input()
propB = 'Prop B: not defined';
@Output()
start = new EventEmitter();
onStart() {
this.start.next(true);
}
}
```
host.component.ts
```js
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, SkipSelf } from '@angular/core';
import { BaseHostComponent } from './base-host.component';
import { BehaviorSubject } from 'rxjs';
import { InnerComponent } from './inner.component';
@Component({
selector: 'host',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
`
})
export class HostComponent {
@ViewChild('inner', { read: ViewContainerRef })
inner: ViewContainerRef;
propA = 'Prop A: defined';
propB = 'Prop B: defined';
isLoading$ = new BehaviorSubject(false);
constructor(
private _ngxBindIoService: NgxBindIoService,
@SkipSelf()
private _parentInjector: Injector,
private _changeDetectorRef: ChangeDetectorRef,
private _resolver: ComponentFactoryResolver
) {
this.createInner();
}
createInner() {
this.inner.clear();
const factory = this._resolver.resolveComponentFactory(InnerComponent);
const componentRef = this.inner.createComponent(factory);
this._ngxBindIoService.linkHostToInner(
this,
componentRef.instance,
{ propA: this.propA, propB: this.propB },
this._parentInjector,
this._changeDetectorRef
);
}
onStart() {
this.isLoading$.next(true);
setTimeout(() => this.isLoading$.next(false), 5000);
}
}
```
## Work without IVY Renderer
**_For correct work without IVY Renderer, all inner Inputs, Outputs and all host properties must be initialized, you can set them to "undefined"._**
For 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:
```bash
npx ngx-bind-io-cli ./src --maxInputs=0 --maxOutputs=0
```
For check and add initialize statement:
```bash
npx ngx-bind-io-cli ./src --fix=all --maxInputs=0 --maxOutputs=0
```
For check and add initialize statement if you want correct work with tspath:
```bash
npx ngx-bind-io-cli ./src --fix=all --maxInputs=0 --maxOutputs=0 --tsconfig=./src/tsconfig.app.json
```
inner.component.ts
```js
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { BindIoInner } from 'ngx-bind-io';
@BindIoInner() // <-- need if use not IVY Renderer for correct detect manual inputs like [propName]="propValue"
@Component({
selector: 'inner',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
Loading... (5s)
Start
{{ propA }}
{{ propB }}
`
})
export class InnerComponent {
@Input()
isLoading: boolean = undefined; // if use not IVY Renderer you mast define all inputs and outputs
@Input()
propA = 'Prop A: not defined';
@Input()
propB = 'Prop B: not defined';
@Output()
start = new EventEmitter();
onStart() {
this.start.next(true);
}
}
```
## License
MIT