title: Not able to refresh/reload Angular view via ChangeDetection.onPush strategy
body: <p>I am trying to update the view of an Angular Component when data changes. I was going through the <code>ChangeDetectionStrategy.OnPush</code> and thought this might solve my problem. However, I didn't succeed.</p>
  
  <p>I have a upcoming-studies component and this is a child component of studies component.</p>
  
  <blockquote>
    <p>upcoming-studies.component.html</p>
  </blockquote>
  
  <pre><code>&lt;div&gt;
    &lt;ngx-datatable
      #upcoming
      class="material"
      [headerHeight]="50"
      [footerHeight]="50"
      [rowHeight]="'auto'"
      [rows]="rows"
      [columns]="columns"
      [columnMode]="'flex'"
      [selected]="selected"
      [selectCheck]="selectUnselect"
      [selectionType]="'single'"
      [limit]="10"
      (select)='onSelect($event)'&gt;
    &lt;/ngx-datatable&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <code>[rows]="rows"</code>, here variable rows gets data from backend using <code>HTTP</code> call.
  I am trying to update the view, whenever this variable <code>rows</code> gets updated or whenever <code>HTTP</code> call is made. Here is part of my ts file.</p>
  
  <blockquote>
    <p>upcoming-studies.component.ts</p>
  </blockquote>
  
  <pre><code>        @Component({
          selector: 'rmis-upcomingstudies',
          templateUrl: './upcoming-studies.component.html',
          changeDetection: ChangeDetectionStrategy.OnPush,
          styleUrls: ['./upcoming-studies.component.css']
      })
      export class UpcomingStudiesComponent implements OnInit, OnChanges {
  
          // ToDo: Check specific data types
          @Input() rows = [];
          @Input() temp = [];
       constructor(private studiesService: StudiesService,
                      private exceptionService: ExceptionService,
                      private cd: ChangeDetectorRef) {
              // Set up the column labels and properties for the upcoming study table
              this.columns = [
                  {prop: 'protocol_number', name: 'Protocol Number', flexGrow: 1},
                  {prop: 'start_date', name: 'Start Date', flexGrow: 1},
                  {prop: 'end_date', name: 'End Date', flexGrow: 1},
                  {prop: 'patient_count', name: 'Patient Count', flexGrow: 1},
                  {prop: 'trial_country', name: 'Country', flexGrow: 1},
              ];
          }
  
          ngOnInit() {
              this.getUpcomingStudies();
          }
          ngOnChanges() {
          //Trying to print the `rows` and `temp` to see if changes in these variable are detected. so that I can run cd.detectChangese() method to update the view.
  }
  </code></pre>
  
  <p>First time the <code>HTTP</code> call happens onInIt(), the next time I am calling <code>getUpcomingStudies()</code> of <code>upcoming-studies-component.ts</code> from a differnet Component (Neither Parent not Child) and that is when I need to update the view. The <code>HTTP</code> call is made and updated data is also returned that updates <code>temp</code> and <code>rows</code> variable but the number of rows on UI does not change. Basically, it reduces the number of rows from upcoming studies view, so I need to update that view so it shows 1 less row. As you can see, I have tried using <code>ChangeDetectionStrategy</code>, but I am not sure on how to make this thing work. Any input would be appreciated. Thanks!</p>
  
  <p><strong>Update 1</strong>: I think, my @Input() variables are not getting updated and thus no change detection, as I tried printing them in ngOnChanges, but ngOnChanges never got executed. Is there any other way to perform the same action?</p>
  
  <p><strong>Update 2:</strong>
  I have made some changes in the ways <code>rows</code> and <code>temp</code> are updated. As I had mentioned earlier, upcoming-studies component is a child of studies component. I am passing rows and temp from studies to upcoming-studies component as shown below:</p>
  
  <blockquote>
    <p>studies.component.html</p>
  </blockquote>
  
  <pre><code>  &lt;upcoming-studies [rows] = rows [temp] = temp&gt;
      &lt;/upcoming-studies&gt;
  </code></pre>
  
  <p>The studies component makes an HTTP call to get the data(rows and temp).</p>
  
  <blockquote>
    <p>studies.component.ts</p>
  </blockquote>
  
  <pre><code>public rows = [];
  public temp = [];
  ngOnInit() {
      this.getUpcomingStudies();
  }
      getUpcomingStudies() {
      this.studiesService
          .getUpComingStudies()
          .subscribe(
              // the first argument is a function which runs on success
              (data) =&gt; {
                  console.log('Data from backend-upcoming', data);
                  this.temp = data['records'];
                  // this.temp = JSON.parse(JSON.stringify(this.temp));
                  this.rows = this.studiesService.util_to_cal_time(data['records']);
                  // this.rows = JSON.parse(JSON.stringify(this.rows));
                  // this.rows = data.records;
  
              },
              // the second argument is a function which runs on error
              (err: HttpErrorResponse) =&gt; {
                  this.exceptionService.errorResponse(err);
              },
              // the third argument is a function which runs on completion
              () =&gt; {
              }
          );
  }
  </code></pre>
  
  <p>For first time, ngOnInit in studies component, calls the <code>getUpcomingStudies</code> method. After this, it's called from another component. Let me know If you need more details.</p>
  
  <blockquote>
    <p>util_to_cal_time - It just modify the time and return the same array.</p>
  </blockquote>
  
  <pre><code>util_to_cal_time(studies: Array&lt;any&gt;) {
          for (const each of studies) {
              const sDate = new Date(each.start_date * 1000);
              each.start_date = sDate.getUTCMonth() + 1 + '/' + sDate.getUTCDate() + '/' + sDate.getFullYear();
              const eDate = new Date(each.end_date * 1000);
              each.end_date = eDate.getUTCMonth() + 1 + '/' + eDate.getUTCDate() + '/' + eDate.getFullYear();
          }
          console.log(studies);
          return studies;
      }
  </code></pre>