In my parent component, I have a property named documents which is an Array used to pass document objects to a child component.
However, when I add a new document to the documents array, the child component's view does not update. Can someone point out what I might be doing wrong?
This is the snippet of code in the parent component where the documents array is updated:
// handle the data that comes back from the dialog
createDialog.afterClosed().subscribe(
data => {
if (data){
// persist vital signs
this.documentService.saveDocument(data.newDocument);
this.documents.push(data.newDocument);
// update the existing document bucket the document belongs to
this.loincToDocumentsMap.get(data.loincCode)?.folderContent.push(data.newDocument);
}
}
);
Here is the child component structure:
@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[] = [];
....
}
This is how the child component is utilized in the parent component:
<document-list *ngIf="showListUi" [documents]="documents"></document-list>
I am seeking guidance as the same approach has worked with other components within the same parent component and I cannot figure out the difference. Another child component updates correctly while this one does not.
Update-1:
After adding this line, the change detection starts working. But why?
this.documents = this.documents.filter(document => {
return true;
})
Update-2: Thank you everyone for your assistance; solutions can be found in the answers below :)