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

Question

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
}

Can you show you app-child component. It's fairly important here... — Kurt Hamilton
– Kurt Hamilton, Commented Mar 20, 2020 at 13:36
KurtHamilton isn't any important thing here, just i'm getting data variable as @Input and iterating in html file — erzen
– erzen, Commented Mar 20, 2020 at 13:40
What style of change detection are you using? Does the OnChanges lifecycle event fire in app-child? — night_owl
– night_owl, Commented Mar 20, 2020 at 13:51
@night_owl i'm not using any type of change detection, which one I need to use? — erzen
– erzen, Commented Mar 20, 2020 at 13:52
The default change detection should be fine. There are some caveats to remember if using OnPush, but you're not, so no worries there! — night_owl
– night_owl, Commented Mar 20, 2020 at 14:00

jophab · Accepted Answer · 2023-03-22 16:46:43Z

13

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
    }   

}

edited Mar 22, 2023 at 16:46

jophab

5,54714 gold badges45 silver badges61 bronze badges

answered Mar 20, 2020 at 14:11

Yash Rami

2,3371 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

erzen Over a year ago

ngOnchanges here i update Data with currentData, but html not renders again

Yash Rami Over a year ago

did you mean you rename the data variable with currentd ? if yes then you have to rename @Input data: any with the @Input currentd: any.

erzen Over a year ago

i've made like this ngOnChanges(changes: SimpleChanges){ this.data = changes.data.currentValue; }

Yash Rami Over a year ago

yeah perfect !!

erzen Over a year ago

no, and before making this i was checking with one extension what shows current state of all app, the variable is updated in everywhere, but this changes doesn't effect to html.

|

Okyam · Accepted Answer · 2021-01-24 10:51:56Z

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;
  }

greg · Accepted Answer · 2022-08-02 11:58:33Z

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

James Skemp · Accepted Answer · 2021-08-23 22:55:48Z

-1

Your child components should expose an EventEmitter.

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

edited Aug 23, 2021 at 22:55

James Skemp

8,6119 gold badges71 silver badges116 bronze badges

answered Mar 20, 2020 at 14:01

Hossam

3633 silver badges9 bronze badges

1 Comment

erzen Over a year ago

This was created

Collectives™ on Stack Overflow

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

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related