@Input not taking latest value after emitted from parent component

0
votes

I have parent component which emittes latest value and in child component it uses @Input wheire in it does not return latest value.

Basically it starts like this in child component...

@Input() test;any;

We do bind this test into HTML and then on click event of button we do something with input value 'test'

onClickButton() {

this.test='your request is in progress'
....does some function where in it passes call to parent componentt and there it retrives the latest data of test so I am expecting that this.test would replaced by latest data from parent component.

}

However, this is not the case here, it retains 'your request is in progress...'

I tried in child component like ngOnChanges(changes:simpleChanges) and tried to assign currentValue to the this.test value; but things are not moving in right direction. everything process right even in parent component i tried printing latest value but in child it remains old value.

I also tried 

this.ref.detectChanges();
this.ref.markforCheck();

but things are not helping me any ways to get updated value from Parent Component.

Parent.ts

this.test ="getting value from services and can see in debugger that value is coming"

2
angular
Give your template file structure of parent where you use child-component.. - GaurangDhorda
@Input() only checks changes when reference of input-property is changed. If you simply changes values then reference of object is same and thus onChanges is not getting to work.. this.obj = { ...this.obj } this de-structuring syntax you have changed values and reference too.. now onChanges() is get to be fired.. - GaurangDhorda
please see update in main thread. - user5769212
in my parent component, this.test="last value from services" , this I varified in the debugger itself. - user5769212
even on when I hover the changes object i can see currentValue is the latest values I am expecting, however when it prints the value when i clicked on button this.test="your request is in progress", still I dont understand whats going wrong here. - user5769212

2 Answers

0
votes

We need to see your parent component.

With your current code, we don't see the moment where you override test variable into the parent component.

I made a StackBlitz just here, is this what you need ?

Feel free to edit and send it back.

0
votes

Check this StackBlitz link

Your html of parent.html...

<button (click)="changeValue()">Change</button>
 <hr>
<app-child [test] ="test"></app-child>

Your .ts of parent.ts...

export class AppComponent  {
   test:any ={};
   changeValue(){
       this.test['data'] = 'loading data form server...'
       setTimeout(()=>{
           this.test['data'] = "Loaded..."
       },500)
   }
}

Your child.html is...

{{value |json}}

Your child.ts is...

export class ChildComponent implements OnInit {
   value:any;
   @Input('test') set testInput(value : any){
     this.value = value;
   }  
   constructor() { }
   ngOnInit() {
   } 
}