The issue arises with Angular's input property not recognizing changes when a new item is added to an array

Question

The issue arises with Angular's input property not recognizing changes when a new item is added to an array

I am currently working with an array called dataSource in my Angular project. I need to detect and handle any changes that occur when new items are added or deleted from this array. To do this, I have passed the array as a getter setter for @Input change detection in a child component.

Below is my AppComponent :

<div>
    <vertital-tabs
          [config]="config"
          [dataSource]="dataSource"    <-- Need to detect Array changes in Child
          [(selectedItem)]="selectedItem">
    </vertital-tabs>

    <div style="background-color: yellow;margin: 10px">
        {{ selectedItem | json }}
     </div>
</div>

In the ChildComponent (vertical-tabs) :

get dataSource(): any {
        return this._dataSource;
}

@Input() set dataSource(value: any) {
    this._dataSource = value;
    // The setter is not triggered when adding a new item to the array.
    // I want it to trigger on clicking the Add New Item button....
    debugger;
}

The current issue I am facing is that the setter method is not being called when a new item is added to the array. However, it does work correctly when deleting an item.

Note: Due to having numerous properties as inputs in real scenarios, using ngOnChanges() is not feasible.

Here is a sample implementation I created for reference: https://stackblitz.com/edit/angular-vertical-tabs-component-split-yzynef

javascript angular typescript angular-material angular-reactive-forms

Answer 1

Answer №1

Angular only monitors changes in the reference - if the reference remains the same, the setter will not be triggered.

In app.component.ts:

let nextItem = this.dataSource.length;
this.dataSource.push({
  id: nextItem.toString(),
  text: 'item ' + nextItem.toString(),
  icon: 'settings',
});

Instead of creating a new array and assigning it to dataSource, you are adding an item to the existing array here.

In vertical-tabs.ts:

onDelete(item, index) {
  this.dataSource = this.dataSource.filter((x) => x !== item);
}

This code snippet creates a new array and assigns it to dataSource.

Deletion works as expected because a new array is generated, but addition does not. To resolve the issue, make a copy of the array and assign it to dataSource:

let nextItem = this.dataSource.length;
this.dataSource = [
  ...dataSource,
  {
    id: nextItem.toString(),
    text: 'item ' + nextItem.toString(),
    icon: 'settings',
  }
];

Answer 2

Angular only monitors changes in the reference - if the reference remains the same, the setter will not be triggered.

In app.component.ts:

let nextItem = this.dataSource.length;
this.dataSource.push({
  id: nextItem.toString(),
  text: 'item ' + nextItem.toString(),
  icon: 'settings',
});

Instead of creating a new array and assigning it to dataSource, you are adding an item to the existing array here.

In vertical-tabs.ts:

onDelete(item, index) {
  this.dataSource = this.dataSource.filter((x) => x !== item);
}

This code snippet creates a new array and assigns it to dataSource.

Deletion works as expected because a new array is generated, but addition does not. To resolve the issue, make a copy of the array and assign it to dataSource:

let nextItem = this.dataSource.length;
this.dataSource = [
  ...dataSource,
  {
    id: nextItem.toString(),
    text: 'item ' + nextItem.toString(),
    icon: 'settings',
  }
];

The issue arises with Angular's input property not recognizing changes when a new item is added to an array

Answer №1

Similar questions

The type '{ children: Element; }' cannot be assigned to the type 'IntrinsicAttributes & ReactNode'

Tips for dealing with Uncaught Error: [nuxt] store/index.js must have a function that returns a Vuex instance

The HTML return function failed to execute properly when I included the return false statement

Error encountered while attempting to import a virtual module, import resolution unsuccessful

Is it necessary to include index.js in each component in a react project?

Concerning the issue of components not loading correctly when using Angular with Lazy Loading Routing

md-select is failing to properly connect with the object assigned to ng-model

Looking to create a timepicker in ReactJS similar to the Uber timepicker, with the added feature of a "Now"

What is the best way to display JSON data in a Listview control?

Executing a function with a click, then undoing it with a second click

Attempting to start the server with http-server resulted in a TypeError indicating that Readable.from is not a valid function available

I am facing issues with Firebase functions where the parameters received from Express.js routes are

Issue with combining jQuery-UI and Bootstrap offcanvas components

How can data tables be generated using AJAX, JSON, HTML, and JS?

Sending information from one ajax request to anotherORTransferring

Navigating through stacks in React Native

Navigating arrays and objects in JavaScript: A beginner's guide

Feeling lost with the concept of getcontext in js/ts and uncertain about how to navigate through it

Click on the div and any elements it contains in the CSS and JavaScript

Node C++ Addon Typescript declaration file