Angular5 property binding arrays with @Input

Question

I'm trying to propagate a change from a component to one of its siblings through their parent via an EventEmitter. The change is to the status of a user in an array.

Here's my code:

child1.component.ts (source)

@Output() adminAdded = new EventEmitter<Array<AdminDetails>>();
...
setAdminStatus(index: number, status: string): void {
  this.admins[index].status = status;
  this.adminAdded.emit(this.admins);
}

parent.component.ts

onAdminAdded(adminDetails: Array<AdminDetails>): void {
  Object.assign(this.adminDetails, adminDetails]);
}

parent.component.html

<child1-component (adminAdded)="onAdminAdded($event)"></child1-component>
<child2-component [admins]="adminDetails"></child2-component>

child2.component.ts

adminMails: string[];
@Input() set admins(admins: Array<AdminDetails>) {
    if (!admins) {
        return;
    }
    adminMails = admins.filter(x => x.status === 'Active').map(x => x.email);
}

and here I'm displaying the emails of active admins. The issue is that the change only gets as far as the parent component. The breakpoint at Object.assign gets hit, but in the setter, it does not.

I assume it is because the reference to the array is the same and it doesn't recognize the change. Any ideas?

bugs · Accepted Answer · 2018-04-19 09:38:36Z

2

You are right, Angular only detect changes when the reference object changes, but not when its content changes.

You can bypass this by moving your logic inside a DoCheck lifecycle hook, which is able to detect changes in object properties.

Edit

As discussed, If you are worried about DoCheck being called too often, creating an entirely new object and reassigning it to your input property should do the trick, as the reference would be different.

edited Apr 19, 2018 at 9:38

answered Apr 19, 2018 at 9:15

bugs

15.4k6 gold badges53 silver badges55 bronze badges

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

5 Comments

Tamás Szabó Over a year ago

I read about the DoCheck hook, but it seemed to be called real often. Is there no way to force an update of the input property?

bugs Over a year ago

If you are worried about DoCheck being called too often, creating an entirely new object and reassigning it to your input property should do the trick, as the reference would be different.

Tamás Szabó Over a year ago

@bugs Could you edit that into the answer, so I can accept?

Tamás Szabó Over a year ago

@AnandG Thanks, but I don't want to introduce a whole new service and the overhead of using observable just to keep track of an array.

bugs Over a year ago

Edited the answer

Collectives™ on Stack Overflow

Angular5 property binding arrays with @Input

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related