Angular child component does not recognize change in input property

Question

I have a parent component which holds a property called documents. This property is an Array and is used to pass the documents in the array to a child component.

But when I push a new document into my property documents, the view of the child component is not changing. Can someone tell what I am doing wrong here?

This is my the place in the parent component where the property documents gets a change:

 // handle the data that comes back from the dialog
 createDialog.afterClosed().subscribe(
  data => {
    if (data){

      // persist vital signs
      this.documentService.saveDocument(data.newDocument); // not implemented yet because it makes no sense with non functioning backend

      this.documents.push(data.newDocument);

      // update the existing document bucket the document belongs to
      this.loincToDocumentsMap.get(data.loincCode)?.folderContent.push(data.newDocument);

    }
  }
);

And this is my child component:

@Component({
  selector: 'document-list',
  templateUrl: './document-list.component.html',
  styleUrls: ['./document-list.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DocumentListComponent implements OnInit, OnChanges {

  @Input() documents: DocumentReference[] = [];
  
  ....
}

And this is where I use the child component in the parent component:

<document-list *ngIf="showListUi" [documents]="documents"></document-list>

I would really appreciate some help because the same worked with other components and I cannot see any difference. Another child component that lives in the same parent component for example is being updated correctly.

Update-1:

After adding this, the change detection works. But why?

this.documents = this.documents.filter(document => {
        return true;
      })

Update-2: Thanks everyone, solutions are in the answers:)

1. any error in the console? 2. FOA, is `showListUi` set to true? — skdonthi, Aug 22 '20 at 14:38
yes it is. No error in the console unfortunately. But I think I know what happens. Angular doesn't seem to detect the change in the documents array. I just added a complete nonsens line of code: I added an update to the initial post showing what I added* Now the change detection works as expected. But why? — Walnussbär, Aug 22 '20 at 14:43

score 4 · Accepted Answer · answered Aug 22 '20 at 14:51

4

Angular change detection only checks object identity, not object content. Inserts or removals are therefore not detected.

Please read here: https://stackoverflow.com/a/43223700/5835354 and https://stackoverflow.com/a/42962723/5835354

answered Aug 22 '20 at 14:51

skdonthi

1,308
1
18
31

1

such a small comment, but very important- I realized I need to reassign objects, if I want to trigger change detection. – Dekel Dec 07 '21 at 11:59

score 1 · Answer 2 · answered Aug 22 '20 at 14:51

1

The reason why your UI is not updating is the OnPush change detection. The OnPush changedetection triggers only the changedetection (hence the render) is when the pointer of the array changes but doesnt check the content of the array. So if you add one item into the array it doesnt change the point of the array.

To solve this there are several solutions

remove OnPush
create a new array
use observable for the array

answered Aug 22 '20 at 14:51

Sándor Jankovics

738
1
6
19

Well I just added onPush from another Post, because I thought this could solve my problem. But it did not. But creating a new array will help because of what you said. Thanks! – Walnussbär Aug 22 '20 at 14:54

Angular child component does not recognize change in input property

2 Answers2