Angular 4 - Custom two way binding

Question

I am trying to implement a custom two way binding between two of my components.

I did read about the naming convention saying that you have to define a @Input() like "test" and then define a @Output() named "testChange".

I couldn't find anything about whether this is still up-to-date or not and I can't get my binding to work.

Some code within parentComponent:

<my-comp [(userGroupIds)]="userGroups"></my-comp>

MyComponent (child):

export class MyComponent implements OnInit, OnDestroy{
  @Input() userGroupIds: number[];
  @Output() userGroupIdsChange = new EventEmitter<number[]>();

  updateValues(){
    //here I am iterating through the rows of a table within my component
    this.userGroupIds = this.tableRows.map(item => {return item['id']});
    this.userGroupdIdsChange.emit(this.userGroupIds);
  }
}

parentComponent:

export class parentComponent implements OnInit, OnChanges, OnDestry{
  userGroups: number[];
  constructor(){
    this.userGroups = [];
  }

  ngOnChanges(changes: SimpleChanges){
    if(changes['userGroups']){
      // this is never show, ngOnChanges doesn't get fired;
      console.log(this.userGroups);
    }
  }
}

Is there something I am missing? Did the Angular-Team change anything?

Afaik the binding does something like

[userGroupsIds]="userGroups" (userGroupsIdsChange)="userGroupIds=$event"

So I tried setting this myself, but no update either. Only thing that work was passing a function to the eventEmitter.

ngOnChanges only fires if any of @Input's has changed. I don't see any @Input's in your parent component. And change should come from parent component(parent of your parentComponent) — yurzui
– yurzui, Commented Sep 28, 2017 at 9:09

n00dl3 · Accepted Answer · 2017-09-28 09:15:06Z

5

Your binding works like a charm, it does not trigger the ngOnchanges method, which is the expected behavior.

from the Angular docs :

OnChanges

Lifecycle hook that is called when any data-bound property of a directive changes.

as userGroups is not an @Input() it cannot be a "data-bound property" , its value changing internally will not run the ngOnChanges hook.

answered Sep 28, 2017 at 9:15

n00dl3

21.6k8 gold badges70 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Faigjaz Over a year ago

Oh dear, I really feel stupid right now. I wasn't even close on thinking about ngOnChanges being the "problem" here. Thank you! Works like a charm indeed. edit: Is there something other that would do what I expected OnChanges to do?

Collectives™ on Stack Overflow

Angular 4 - Custom two way binding

1 Answer 1

OnChanges

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

OnChanges

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related