title: Angular array changes detection
body: <p>I am a beginner with Angular, and i can't find proper solution for my problem.</p>
  
  <p>I have a component containing table filled with list of items (each item in list is in another component), and there is third component containing filter. Filter contains multiple checkboxes and a filter button. </p>
  
  <p>I send boolean array of checkboxes states from filterComponent through itemsListComponent to singleItemComponent and it works fine. My problem is changes detection. When I used NgDoCheck with differs it works always when I click at checkbox and filter button instead only filter button. </p>
  
  <p>I tried NgOnChanges but it worked only once and then it didn't see any changes of values into array.</p>
  
  <p>This is my SingleItemsComponent (I think you don't need others to help me solve this). Look at this and show me any example of solving this problem please.</p>
  
  <pre><code>import { Component, OnInit, OnChanges,ViewChild, AfterViewInit, Inject,     Input, DoCheck, KeyValueDiffer, KeyValueDiffers, SimpleChanges, SimpleChange,     ChangeDetectionStrategy, ChangeDetectorRef, IterableDiffers } from     '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { animate, state, style, transition, trigger } from     '@angular/animations';
  import { MatTableDataSource, MatPaginator, MatSort,     throwToolbarMixedModesError } from '@angular/material';
  import { IPOLine } from 'src/app/models/po-line';
  import { POLineService } from 'src/app/services/po-line.service';
  @Component({
    selector: 'app-po-lines-list',
    templateUrl: './po-lines-list.component.html',
    styleUrls: ['./po-lines-list.component.css'],
    animations: [
      trigger('detailExpand', [
        state('collapsed', style({ height: '0px', minHeight: '0', display:     'none' })),
        state('expanded', style({ height: '*' })),
        transition('expanded &lt;=&gt; collapsed', animate('225ms cubic-bezier(0.4,     0.0, 0.2, 1)')),
      ]),
    ],
  })
  export class POLinesListComponent implements OnInit, DoCheck{
    isLogged = false;
    login: string;
    dataSource = new MatTableDataSource&lt;IPOLine&gt;();
    expandedElement: IPOLine;
    errorMessage: string;
    response: any;
    today = new Date(); // (1990, 0, 1);
    isLoadingList = true;
  
    differ: any;
  
    @Input() sentData: boolean[];
    _sentData = this.sentData;
    ngDoCheck(){
  
      var changes = this.differ.diff(this._sentData);
      if (changes){
        console.log('changes detected changes detected changes detected     changes detected changes detected ');
      }
      else
      console.log('changes not detected changes not detected changes not     detected changes not detected ');
    }
  
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
  
    constructor(
      //private cd: ChangeDetectorRef,
      private differs: KeyValueDiffers,
      private _POLineService: POLineService,
      private activatedRoute: ActivatedRoute) {
        this.differ = differs.find({}).create();
    }
  
    ngOnInit() {
      // Assign the data to the data source for the table to render
      this.login = this.activatedRoute.snapshot.paramMap.get('login');
      this._POLineService.getUserPOLines(this.login)
        .subscribe(data =&gt; {
          this.dataSource.data = data;
            },
          error =&gt; {
            this.errorMessage = &lt;any&gt;error;
            this.isLoadingList = false;
          }
          ,
          () =&gt; {
            // console.log('eee' + this.dataSource.data);
            this.isLoadingList = false;
            this.dataSource.data.forEach(x =&gt; x.isExpired = new     Date(x.PromisedDate) &lt; new Date() ? true : false);
          }
        );
  
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    }
  }
  </code></pre>
  
  <p>I'm sorry for the mess in a code but I tried so many things i don't even remember what was what. Thanks for any help.</p>
  
  <p>FilterComponent.ts:</p>
  
  <pre><code>import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
  
  @Component({
    selector: 'app-filters',
    templateUrl: './filters.component.html',
    styleUrls: ['./filters.component.css']
  })
  export class FiltersComponent implements OnInit {
  
    @Output() filterByClass = new EventEmitter();
    filterByTTR = false;
    filterByTBR = false;
    filters:boolean[] = [];
    constructor() { }
  
    ngOnInit() {
    }
  
  log() {
    if(!this.filterByTTR)
     console.log('TTR not checked');
     else
     console.log('TTR checked');
    if (!this.filterByTBR)
     console.log('TBR not checked');
     else
     console.log('TBR checked');
     this.filters[0] = this.filterByTTR;
     this.filters[1] = this.filterByTBR;
  
     this.filterByClass.emit(this.filters);
  }
  </code></pre>
  
  <p>Part of FilterComponent.html:</p>
  
  <pre><code>&lt;mat-card-content class="col"&gt;
  &lt;mat-checkbox [checked]="filterByTTR" (change)="filterByTTR = !filterByTTR"&gt;TTR&lt;/mat-checkbox&gt;
  &lt;mat-checkbox [checked]="filterByTBR" (change)="filterByTBR = !filterByTBR"&gt;TBR&lt;/mat-checkbox&gt;
  &lt;!-- &lt;mat-checkbox [(ngModel)]="filterByTBR"ref-TBR&gt;TBR&lt;/mat-checkbox&gt; --&gt;
  &lt;div class="d-flex justify-content-between"&gt;
    &lt;button mat-raised-button  color="primary"&gt;Clear&lt;/button&gt;
    &lt;button mat-raised-button (click)="log()" color="primary"&gt;Apply&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>PoLinesCompoenent.ts:</p>
  
  <pre><code>import { Component, OnInit, NgModule, ViewChild, Input } from 
  '@angular/core';
  
  @Component({
    selector: 'app-po-lines',
    templateUrl: './po-lines.component.html',
    styleUrls: ['./po-lines.component.css']
  })    
  export class POLinesComponent implements OnInit {
    count: boolean[];
    constructor() { }    
    ngOnInit(){}      
    displayCounter(count) {
      console.log('first value is: ' + count[0] + ' second value is: ' +     count[1]);
      this.count = count;
    }
  </code></pre>
  
  <p>PoLinesComponent.html:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="side-bar col"&gt;
        &lt;app-filters (data)='displayCounter($event)'&gt;&lt;/app-filters&gt;
      &lt;/div&gt;
      &lt;div class="content col"&gt;
        &lt;app-po-lines-list [sentData]="count"&gt;&lt;/app-po-lines-list&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>