nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN

npm

Need private packages and team management tools?Check out npm Orgs. »

ngx-bind-io

0.6.6 • Public • Published

Greenkeeper badge Build Status npm version

Directives for auto binding Input() and Output() in Angular7+ application

For correct work, 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 and run:

npx ngx-bind-io-cli ./src --maxInputs=0 --maxOutputs=0

For check and add initialize statement:

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:

npx ngx-bind-io-cli ./src --fix=all --maxInputs=0 --maxOutputs=0  --tsconfig=./src/tsconfig.app.json

Example

Without auto binding inputs and outputs

<component-name
    (start)="onStart()"
    [isLoading]="isLoading$ | async"
    [propA]="propA"
    [propB]="propB">
</component-name>

With auto binding inputs and outputs

<component-name
    [bindIO]>
</component-name>

Installation

npm i --save ngx-bind-io

Links

Demo - Demo application with ngx-bind-io.

Stackblitz - Simply sample of usage on https://stackblitz.com

Usage

app.module.ts

import { NgxBindIOModule } from 'ngx-bind-io';
import { InnerComponent } from './inner.component';
import { HostComponent } from './host.component';
 
@NgModule({
  ...
  imports: [
    ...
    NgxBindIOModule.forRoot(), // in components import as "NgxBindIOModule"
    ...
  ]
  declarations: [ 
    ...
    InnerComponent, 
    HostComponent 
    ...
  ],
  ...
})
export class AppModule { }

inner.component.ts

import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { BindIoInner } from 'ngx-bind-io';
 
@BindIoInner() // <-- need for correct detect manual inputs like [propName]="propValue"
@Component({
  selector: 'inner',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div *ngIf="isLoading">Loading... (5s)</div>
    <button (click)="onStart()">Start</button> <br />
    {{ propA }} <br />
    {{ 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);
  }
}

base-host.component.ts

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

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { BaseHostComponent } from './base-host.component';
 
@Component({
  selector: 'host',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <inner [bindIO]></inner>
  `
})
export class HostComponent extends BaseHostComponent {
  propA = 'Prop A: defined';
  propB = 'Prop B: defined';
}

Debug

For global debug all bindings

import { NgxBindIOModule } from 'ngx-bind-io';
 
@NgModule({
  ...
  imports: [
    ...
    NgxBindIOModule.forRoot({debug: true})
    ...
  ],
  ...
})
export class AppModule { }

For debug on one place

<comp-name [bindIO]="{debug:true}"></comp-name>

Rules for detect inputs and outputs

Custom rules for detect output method

my-ngx-bind-outputs.service.ts

import { IBindIO, NgxBindOutputsService } from 'ngx-bind-io';
 
export class MyNgxBindOutputsService extends NgxBindOutputsService {
  checkKeyNameToOutputBind(directive: Partial<INgxBindIODirective>, 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

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

export class NgxBindOutputsService {
  ...
  checkKeyNameToOutputBind(directive: Partial<INgxBindIODirective>, 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

export class NgxBindInputsService {
  ...
  checkKeyNameToInputBind(directive: Partial<INgxBindIODirective>, hostKey: string, innerKey: string) {
    return hostKey === innerKey && hostKey[0] !== '_';
  }  
  ...
  checkKeyNameToObservableInputBind(directive: Partial<INgxBindIODirective>, 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

import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { BindIoInner } from 'ngx-bind-io';
 
@BindIoInner() // <-- need for correct detect manual inputs like [propName]="propValue"
@Component({
  selector: 'inner',
  // changeDetection: ChangeDetectionStrategy.OnPush, <-- change detection with OnPush strategy incorrected work for dynamic components 
  template: `
    <div *ngIf="isLoading">Loading... (5s)</div>
    <button (click)="onStart()">Start</button> <br />
    {{ propA }} <br />
    {{ 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

import { ChangeDetectionStrategy, ChangeDetectorRef, Component } 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: `
    <template #inner></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,
    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._changeDetectorRef
    );
  }
  onStart() {
    this.isLoading$.next(true);
    setTimeout(() => this.isLoading$.next(false), 5000);
  }
}

License

MIT

install

npm i ngx-bind-io

Downloadsweekly downloads

26

version

0.6.6

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability