Updating parent object data in child: A step-by-step guide

Question

Updating parent object data in child: A step-by-step guide

Currently, I am in the process of creating a custom dropdown component. Within this component, I have a config object that is initialized within the ngOnInit() method. This config object combines both default configurations as well as user-provided configurations through an @Input(). However, upon making changes to the config object from the parent component at runtime, I noticed that these updates are not reflected in the ngOnChanges() method of my child component.

In an attempt to resolve this issue, I have made adjustments:

Child Component

@Input() config: MyConfig;
        @Input() disabled: boolean
        
        ngOnChanges() {
                console.log('config', this.config); // this is not updating
                console.log('disabled', this.disabled); // this is being detected
            }

Parent Component HTML

<button (click)="changeConfig()">Change Config</button>
<app-child [config]="customConfig" [disabled]="newDisabled"></app-child>

Parent Component TypeScript

newDisabled = false;
customConfig = {
        value: 'code',
        label: 'name',
        floatLabel: 'Select'
    };

changeConfig() {
    this.customConfig.value = 'name';
    this.newDisabled = true;
}

The state change works for the disabled variable, however, it does not apply to the config. Is there something I am missing or doing incorrectly? Any assistance would be greatly appreciated.

javascript angular typescript

Answer 1

Answer №1

Your issue stems from the fact that your ngOnInit is assigning a new object to the config variable. This disrupts the reference to the original object due to @Input() being called only once, resulting in changes not being detected.

To resolve this, you can utilize a setter and getter. Below is a StackBlitz demo showcasing how to address this:

Link to StackBlitz Demo

Parent Component:

import { ChangeDetectorRef, Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  newDisabled = false;
  customConfig = {
    value: 'code',
    label: 'name',
    floatLabel: 'Select',
  };

  changeConfig1() {
    this.customConfig.value = 'name1';
    this.newDisabled = true;
    console.log('Change Config 1');
  }

  changeConfig2() {
    this.customConfig.value = 'name2';
    this.newDisabled = true;
    console.log('Change Config 2');
  }
}

Child Component:

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

class MyConfig {}

@Component({
  selector: 'hello',
  template: `<h1> config: {{config | json}}</h1><h1> disabled: {{disabled}}</h1>`,
  styles: [],
})
export class HelloComponent {
  private _defaultConfig = {
    key: 'default',
  };

  @Input() disabled: boolean;

  private _config: MyConfig;
  @Input() config: MyConfig;
  set () {
    if (!this.config) {
      this.config = new MyConfig(); // it is a class
    } else {
      this._config = {
        ...this.config,
        ...this._defaultConfig,
      };
    }
  }
  get () {
    return this._config;
  }

  ngOnChanges() {
    console.log('config', this.config);
    console.log('config', this._config);
    console.log('disabled', this.disabled);
  }
}

Answer 2

Your issue stems from the fact that your ngOnInit is assigning a new object to the config variable. This disrupts the reference to the original object due to @Input() being called only once, resulting in changes not being detected.

To resolve this, you can utilize a setter and getter. Below is a StackBlitz demo showcasing how to address this:

Link to StackBlitz Demo

Parent Component:

import { ChangeDetectorRef, Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  newDisabled = false;
  customConfig = {
    value: 'code',
    label: 'name',
    floatLabel: 'Select',
  };

  changeConfig1() {
    this.customConfig.value = 'name1';
    this.newDisabled = true;
    console.log('Change Config 1');
  }

  changeConfig2() {
    this.customConfig.value = 'name2';
    this.newDisabled = true;
    console.log('Change Config 2');
  }
}

Child Component:

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

class MyConfig {}

@Component({
  selector: 'hello',
  template: `<h1> config: {{config | json}}</h1><h1> disabled: {{disabled}}</h1>`,
  styles: [],
})
export class HelloComponent {
  private _defaultConfig = {
    key: 'default',
  };

  @Input() disabled: boolean;

  private _config: MyConfig;
  @Input() config: MyConfig;
  set () {
    if (!this.config) {
      this.config = new MyConfig(); // it is a class
    } else {
      this._config = {
        ...this.config,
        ...this._defaultConfig,
      };
    }
  }
  get () {
    return this._config;
  }

  ngOnChanges() {
    console.log('config', this.config);
    console.log('config', this._config);
    console.log('disabled', this.disabled);
  }
}

Answer 3

Answer №2

The issue lies in the fact that the change detection mechanism is only triggered when there is a modification to the object customConfig. In your scenario, only the value property receives an update. To address this, you can make the following adjustment in the parent.component.ts:

changeConfig() {
    this.customConfig = Object.assign(this.customConfig, { value: 'name'});
    this.newDisabled = true;
}

By implementing this solution, a fresh configuration object will be generated with the updated value property along with all the other existing attributes of the original customConfig.

Answer 4

The issue lies in the fact that the change detection mechanism is only triggered when there is a modification to the object customConfig. In your scenario, only the value property receives an update. To address this, you can make the following adjustment in the parent.component.ts:

changeConfig() {
    this.customConfig = Object.assign(this.customConfig, { value: 'name'});
    this.newDisabled = true;
}

By implementing this solution, a fresh configuration object will be generated with the updated value property along with all the other existing attributes of the original customConfig.

Answer 5

Answer №3

When comparing input objects, they are done by reference. To ensure changes in your child component and to trigger ngOnChanges, follow these steps:

changeConfig() {
 this.customConfig = {...this.customConfig, value: 'name'};;
 this.newDisabled = true;
}

Additionally, move the code below from ngOnInit to ngOnChanges. There is a chance that during initialization, input changes may not yet be available.

if (!this.config) {
   this.config = new MyConfig(); // It is a class
 } else  {
    this.config = {
           ...this._defaultConfig,
           ...this.config
          };
 }

Answer 6

When comparing input objects, they are done by reference. To ensure changes in your child component and to trigger ngOnChanges, follow these steps:

changeConfig() {
 this.customConfig = {...this.customConfig, value: 'name'};;
 this.newDisabled = true;
}

Additionally, move the code below from ngOnInit to ngOnChanges. There is a chance that during initialization, input changes may not yet be available.

if (!this.config) {
   this.config = new MyConfig(); // It is a class
 } else  {
    this.config = {
           ...this._defaultConfig,
           ...this.config
          };
 }

Updating parent object data in child: A step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

The process of transitioning to a different view through a button press

The script fails to execute on content loaded through AJAX in Django

What is the correct way to chain Promises for the tasks of creating a new user and hashing their password simultaneously?

executing jQuery toggle on freshly generated content

Using jqgrid to customize column header tooltips which are distinct from the actual column label

Create a new ASP.NET MVC project and integrate Angular 2 for a dynamic web application

Encountering an "AJAX not a function" error while using the d3/flask interface

What is the best way to present these values with spaces in between each word?

What's the best way to position an ion-label at the top of the stack

How to structure nested objects within a JavaScript object?

Translating PCRE(PHP) regular expressions into ECMAScript(Javascript) syntax

Issues encountered while building an Asp.net core 2/Angular 4 template

Experimenting with JavaScript within an Immediately Invoked Function Expression

Guide to activating a reaction following an occurrence in a React component

Exploring the world of two-dimensional arrays in D3 programming

The new and improved Vue 3 computed feature in the Composition API

Updating styled-components variables based on media queries - A step-by-step guide

Adding a fresh element to an object array in TypeScript

Using an array and a variable for a JavaScript assignment

Navigating a JSON object using jQuery