Angular 2 Databinding why and how does it work

Question

Good Morning from Germany,

first my code works like a charm and I´m happy about the awesome learning curve with Angular 2. I´m getting things faster done than any time before.

My problem is that I dont understand why the databinding works. For what I see, I dont get any piece of code which would it explain. Hope someone can give me a hint.

Basicly I got 3 variables:

employee: Employee[]; //For editing a single Employee
employees: Employees[]; //Collects all Employees (Received from PHP)
pagedItems: any[]; //Stores some of the Employees[] to page trough them in ngFor

Creation of the list:

<ng-template ngFor let-i="index" let-c="count" let-weeks [ngForOf]=" pagedItems">
<div (click)="showDialog($event, people)" *ngFor="let people of weeks; let i2 = index;">
...

pagedItems get defined by employees.slice

ShowDialog (=Formular to change a employee):

showDialog(event, people) {
    this.employee = people[0];
    //console.log(people[0]);
}

My Formular:

<p-dialog styleClass="boxSettings" header="Datenerfassung" [(visible)]="displayDatacollect">
    <form-ShiftData *ngIf="employee" [employee]="employee">

    </form-ShiftData>
</p-dialog>

In the formular I bind everything to the employee class. On submit I save the data in the database.

So this is basicly everything I do. My problem is now that I dont understand why, If I change the employee class in my formular (even in front of submitting) the class employees and the pagedItems class are changing. And so also my List.

What I see is that I set the variables like: employees -> pagedItems -> people -> employee

But no line which could lead in the other direction. So somehow Angular does this on his own.

If you could explain it or just send a tutorial which explains it, I would be very happy.

EDIT 1:

@Input('employee') employee: Employee;

This way I import it in the formular component, also not quite sure why I dont write here:

@Input('employee') employee: Employee[];

But otherwise it wont work.

Ah and If I already ask, If you have a hint how I can set displayDatacollect (Formular) inside of form-ShiftData (Separate Component) I would be happy to :D

Answer 1

If I understand correctly your question, this is not related to Angular but to how object references work in JS.

It is the same employee object that is in employee, employees and pagedItems.

When you do something like pagedItems = employees.slide(...) you get a new array, but this array contains the same object as the employees array.

For example :

var tab = [ obj1, obj2, obj3 ];
var slice = tab.slice(0, 1); //slice = [ obj1 ]
// obj1 is the same object as in tab. So if you modify slice[0], you modify tab[0]

Edit (after you comment):

If you want to modify the employee without affecting the original array, then you need to modify a copy of the employee. You can do this using Object.assign :

var employeeCopy = Object.assign({}, employee)
// now you can modify your employeeCopy without affecting the original object
// note that if employee contains a refernce to another object, employeeCopy and employee will share the same reference

If you need to perform a deep copy of an array, then you will have to do it yourself, by creating a copy of each object in the original array. You can take a look here