child component doesn't update when I update input variable - Angular

user_11062476 0
Viewed 9799

I have child component and in this I pass as input an value from parent component. In parent component I'm updating this input variable on event emmiter trigger, but the child component doesn't update. I've checked in augury the input variable updates. Why child component don't updates?

ParentComponent.html

<app-child
[data]="data"
(filterEmmiter)="filter($event)">
</app-child>

ParentComponent.ts

data: any;
.
.
.
getUsers() {
  this.usersService.getAllUsers().subscribe(res => {
    this.data = res;
  });
}
.
.
.

filter(data){
  this.data = data
}
angular updates render
4 Answers

you can try like this, here you want to get the data from the parent component to child component, Here your parent component is ParentComponent and child component is app-child so here for getting the data from parent to child we can use ngOnChanges(changes: SimpleChanges)

ParentComponent.html

<app-child
[data]="data"
(filterEmmiter)="filter($event)">
</app-child>

child.component.ts


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

class Child  implements OnInit, OnChanges {

    @Input() Data: any; // here is the data variable which we are getting from the parent 

    constructor() {}

    ngOnchanges(changes: SimpleChanges) {
      console.log(changes); // here you will get the data from parent once the input param is change
    }   

}
user_57462360

Your child components should expose an EventEmitter.

 @Output() filteremmiter = new EventEmitter<any>();
user_116661790

Recently I was also facing something similar, in my case, using the Onchanges method in the child, I saw that the input change happens after the logic that I want to execute then the a new value of the input doesn't get reflected in this logic.

What I did was to force the detect changes in the place I assigned the input data like this:

I add this to my constructor

 constructor( private changeDetector: ChangeDetectorRef) {}

Then where I assigned a value to the data

this.data=something
this.changeDetector.detectChanges();

After that, I notice that the method onChanges was called first and then the logic with the new value of the input, After that I just set manually the value of the input in the Onchanges method that should be placed in the child component

 ngOnChanges(changes: SimpleChanges): void {
    this.put= changes.input.currentValue;
  }
user_32279910

The most likely answer is that you need to take whatever code you have in ngOnInit() and put it in ngOnChanges()

If you have code that looks like formBuilder.group( ....) , this needs to go in ngOnChanges().

ngOnInit fires once. So doing it wrong will work the first time.

ngOnChanges fires every time an @Input changes (paraphrasing the doc...). So when you click on nav elements, and show the new Item, the child object will respond as expected.

You must import SimpleChanges from @angular/core

import { Component, OnInit, SimpleChanges ,Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';

 ngOnChanges(changes: SimpleChanges) {
   
    //console.log('changes in child form',changes); // here you will get the data from parent once the input param is change
    this.udsFormGroup=   this.myFormGroupDefinition();
  
      this.udsFormGroup.valueChanges.subscribe( data =>{
          this.formChanged();      
        });
  }

https://angular.io/api/core/OnChanges

here is a great article https://www.stackchief.com/blog/ngOnChanges%20Example%20%7C%20Angular

user_18298810
Related