title: Angular child component does not recognize change in input property
body: <p>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.</p>
  <p>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?</p>
  <p>This is my the place in the parent component where the property documents gets a change:</p>
  <pre><code> // handle the data that comes back from the dialog
   createDialog.afterClosed().subscribe(
    data =&gt; {
      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);
  
      }
    }
  );
  </code></pre>
  <p>And this is my child component:</p>
  <pre><code>@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[] = [];
    
    ....
  }
  </code></pre>
  <p>And this is where I use the child component in the parent component:</p>
  <pre><code>&lt;document-list *ngIf=&quot;showListUi&quot; [documents]=&quot;documents&quot;&gt;&lt;/document-list&gt;
  </code></pre>
  <p>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.</p>
  <p><strong>Update-1:</strong></p>
  <p>After adding this, the change detection works. But why?</p>
  <pre><code>this.documents = this.documents.filter(document =&gt; {
          return true;
        })
  </code></pre>
  <p><strong>Update-2:</strong>
  Thanks everyone, solutions are in the answers:)</p>