Angular 4 component two way binding issue

Question

I have an array:

const a = [apple,ball,cat]

I'm passing this to two components:

<app-header [appData]="data"  ></app-header>

<list-todo [appData]="data" [getData]="getData" [setData]="setData" ></list-todo>

In the appHeader component,

export class appHeader  {
  @Input('appData') data : any

  clear(){
    this.data = []
  }
}

performing the clear() function is not affecting the array in the listTodo component. Is there any way to solve that issue?

I also checked two way binding with attributes but nothing worked anymore!

Pankaj Parkar · Accepted Answer · 2017-08-10 11:04:20Z

7

Input binding sends data to child component in unidirectional way, so when we modify child component data it doesn't flow up. Since you're assigning new blank array to this.appData in child component(it doesn't flow up). In this case you could consider changing your appData property binding to be two way binding. So that anything updates in child component will update the relative property in parent component, but yes it doesn't happen magically. You have to update the data manually ;)

To make the same thing working, you have to emit changed copy of object to parent component via Output binding like [(appData)]="data" (it uses EventEmitter to emit data to parent compoent).

AppComponent Template

 <app-header [appData]="data"  ></app-header>
<list-todo [(appData)]="data"></list-todo>

ListTodoComponent

@Component({
  selector: 'list-todo',
  template: `
     <ul>
      <li *ngFor="let item of appData">{{item}}</li>
     </ul>
     <button (click)="clear()">Clear</button>
  `
})
export class ListTodoComponent { 
  @Input() appData;
  @Output() appDataChange: EventEmitter<any> = new EventEmitter<any>();

  clear(){
    this.appData = [];
    //this emit is important to send data back to parent.
    //make sure you should have `Change` prefix to bounded value, like `appData` + `Change` = `appDataChange`, 
    //which ultimately saves few lines of code.
    this.appDataChange.emit(this.appData); 
  }
}

Demo Here

edited Aug 10, 2017 at 11:04

answered Aug 10, 2017 at 10:18

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Chris Barr Over a year ago

Your comment here saved me some headache, I cannot believe that the name must be the same as the property and end with Change - no other name is allowed! Renaming this to appDataChanged (with a 'd' on the end) makes it not return a value to the parent!

Robby Cornelissen · Accepted Answer · 2017-08-10 10:28:30Z

6

By doing this.data = [], you're not emptying your array, but replacing it with a new instance. Your parent component and the other child component are still referring to the original instance, which results in the behavior you describe.

One solution is to empty the original array instead of replacing it:

clear() {
    this.data.length = 0;
}

In doing so, all components will keep referring to the same array instance, and its state will be correctly reflected.

edited Aug 10, 2017 at 10:28

answered Aug 10, 2017 at 10:21

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

1 Comment

Ashkar Km Over a year ago

Thanks Bro it's Working fine !!

Collectives™ on Stack Overflow

Angular 4 component two way binding issue

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related