External module "two-way-binding"

TwoWayBinding

• TwoWayBinding(comparer?: (a: any, b: any) => boolean): (Anonymous function)

• An AOP Aspect to generate the code needed for two-way binding in Angular controls. Implemented as a typescript decorator that injects the logic to link a property with it's change event.

  • use a simple field for the input.
  • add the TwoWayBinding decorator before the input decorator.
  • do not initialize the output change event

  So instead of this bulky code:

  //-------------------------------------------------
  comparer: (a, b) => boolean = isContentEqual;
  somePropertyValue: string;
  @Input()
  set someProperty(value) {
      if (!this.comparer(this.somePropertyValue, value)) {
          this.somePropertyValue = value;
          this.somePropertyChange.emit(value);
      }
  }
  
  get someProperty() {
      return this.somePropertyValue;
  };
  
  @Output()
  somePropertyChange = new EventEmitter<string>();
  //-------------------------------------------------

  you can simply write:

  //-------------------------------------------------
  @TwoWayBinding()
  @Input()
  someProperty: string;
  @Output()
  somePropertyChange: EventEmitter<string>;
  //-------------------------------------------------

  Parameters

  • Default value comparer: (a: any, b: any) => boolean = isContentEqual

    The comparer used to detect changes; if the new object is the same as the old object, no event will be emitted. If no comparer is specified, @toms-toolbox/essentials/isContentEqual is used. Set the comparer to undefined to omit comparison.

    • • (a: any, b: any): boolean

      • Parameters

        • a: any

        • b: any

        Returns boolean

  Returns (Anonymous function)