AngularJS How to convert component two-way binding to one-way binding

Question

Hello what is right way to convert two way data binding in angularJS to one way?

I have component

import template from './test.component.html';
import controller from './test.controller';

export const DateWrapperComponent = {
  bindings: {
    test: '='
  },
  template,
  controller
};

controller

export default function TestController($scope) {
  /* ngInject */

  $scope.$watch('$ctrl.test', () => {
     console.log(this);
  });
}

and view:

<input type="text" ng-model="$ctrl.test">

what is right way to convert it?

ng-bind="$ctrl.test" ? ..... but if this is an input why to use one way binding, maybe you want to set it to readonly? — lealceldeiro
– lealceldeiro, Commented Jul 13, 2018 at 17:34
nope, I have task to convert it to one way data binding, input is not readonly :( — axlpl
– axlpl, Commented Jul 13, 2018 at 17:44
Possible duplicate of Difference between one way binding and two way binding in angularjs — lealceldeiro
– lealceldeiro, Commented Jul 13, 2018 at 17:49
The proposed duplicate does not apply. It does not explain how the two types of bindings work in components or how to change them. — georgeawg
– georgeawg, Commented Jul 13, 2018 at 19:14

georgeawg · Accepted Answer · 2018-07-13 19:03:00Z

Making the Migration to Angular 2+ Easier

Convert AngularJS two-way binding with = to use one-way binding with < for inputs, and expression binding with & for outputs:

app.component("testComponent", {
    bindings: {
        sample: '<',
        sampleChange: '&',
    },
    template: `
        <fieldset>
            <input ng-model="$ctrl.sample"
                   ng-change="$ctrl.sampleChange({$event: $ctrl.sample})"
            />
        </fieldset>
    `,
});

Usage:

<test-component sample="test" sample-change="test=$event">
</test-component>

TEST={{test}}

The reason for doing this is that it makes the migration to Angular 2+ easier. Angular 2+ doesn't have two-way binding with =.

For more information, see

AngularJS Developer Guide - Component-based application architecture

Angular 2+ two-way binding

With Angular 2+, two-way binding (banana in a box):

<app-sizer [(size)]="fontSizePx"></app-sizer>

Is syntactic sugar for:

<app-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></app-sizer>

For more information, see

Angular.io Guide - Template Syntax - Two-way binding

Pankaj Parkar · Accepted Answer · 2018-07-13 17:57:25Z

0

Its seems like you wanted to pass the test value to your component form the consumer component, but when that value gets change by your component it shouldn't be reflected back to consumer component value. So you could use <(one way binding) instead of =(two way binding) inside bindings option. Inside binding < make sure that the data will flow in unidirectional way (top to bottom).

export const DateWrapperComponent = {
  bindings: {
    test: '<'
  },
  template,
  controller
};

Note: This feature is applicable from 1.5.x version when component API got introduced in AngularJS

answered Jul 13, 2018 at 17:57

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

axlpl Over a year ago

but I need to send data from view to component not from component to view in one way data binding, it is possible?

Pankaj Parkar Over a year ago

@axlpl not sure what you asked? can you please elaborate a bit?

Collectives™ on Stack Overflow

AngularJS How to convert component two-way binding to one-way binding

2 Answers 2

Making the Migration to Angular 2+ Easier

Usage:

Angular 2+ two-way binding

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Making the Migration to Angular 2+ Easier

Usage:

Angular 2+ two-way binding

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related