When changing value of @Input directive inside a subscribe block in parent, changes are not detected in child component

Question

I am changing the value for one Input directive to my child component from parent component inside subscribe block. However, the new values are not detected in the child.

The child component already implements OnChanges and correctly defines Input directives.

Below is the pseudo code for my components. It is simplified from actual code for ease of understanding the context.

PARENT COMPONENT HTML:

<h1>PARENT</h1>
<button (click)="buttonClicked()">NEXT</button>
<child-component  [inputChildVar]="parentValue"></child-component>

PARENT COMPONENT TS:

ngOnInit() {
    this.parentValue= {
      "currentPageNo":5,
      "currentPageData": [{"DEVICE":"Kernel1","RANGE":"500Hz"}, {"DEVICE":"Kernel2","RANGE":"500Hz"}]
    }
}

buttonClicked()
{
  this.parentService.ServiceMethod().subscribe(data=>{
     this.parentValue= {
        "currentPageNo":data.currentPageNo,
        "currentPageData":data.array
      }
     this.parentValue=JSON.parse(JSON.stringify(this.parentValue))
  })
}

CHILD COMPONENT HTML:

<h1>inputChildVar<h1>

CHILD COMPONENT TS:

import { Component, OnInit, Input,OnChanges } from '@angular/core';

@Component({ 
    selector: 'child-component', 
    template: '<h1>inputChildVar<h1>', 
})

export class ChildComponent implements OnInit,OnChanges 
{ 
    @Input() inputChildVar

    constructor() { } 
    ngOnChanges(){ 
        console.log(this.inputChildVar) 
    } 

    ngOnInit() {} 
}  

Expected Result: On getting a response from parentService.ServiceMethod, when parentValue is changed, the new values should be reflected on screen through child component.

Actual Result: There is no change on the screen

Answer 1

As I tested in the StackBlitz it is working fine for me, have a look at:

Parent Component HTML:

<h1>PARENT</h1>
<button (click)="buttonClicked()">NEXT</button>
<app-child  [inputChildVar]="parentValue"></app-child>

Parent Component TS:

import { Component } from '@angular/core';
import { DataService } from './data.service';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrls: ['form-field-overview-example.css'],
  providers: [DataService]
})
export class FormFieldOverviewExample {

  constructor(private service: DataService) {

  }
  parentValue = {
    "userId": 112,
    "id": 1121,
    "title": "masxsat",
    "body": "teasdas"
  }
  buttonClicked() {
    this.service.getData()
    this.service.data.subscribe(value => {
      console.log(value)
      this.parentValue = value;
    })
  }
}

Child Component HTML:

<h1>Child</h1>
<div>
{{inputChildVar | json}}
</div>

Child Component TS:

import { Component, OnInit, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges {

  @Input() inputChildVar

  constructor() { }
  ngOnChanges() {
    console.log(this.inputChildVar)
  }
  ngOnInit() { }
}

Data.Service.ts:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {

  data = new BehaviorSubject(null)

  constructor(
    private http: HttpClient
  ) { }


  getData() {
    this.get()
      .then(response => {
        this.data.next(response);
      })
  }

  get(): Promise<any> {
    const url = `https://jsonplaceholder.typicode.com/posts/1`;
    return this.http.get(url)
      .toPromise()
      .catch(this.handleError);
  }

  // handler for error in URL
  private handleError(error: any): Promise<any> {
    return Promise.reject(error.message || error);
  }
}

StackBlitz

Answer 2

I was able to resolve the issue by triggering change detection through changeDetectorRef. Its working now. Got reference from : Angular 2 - View not updating after model changes