Changing the child component input in Angular's deep cloning cannot be reflected on the user interface

Question

Changing the child component input in Angular's deep cloning cannot be reflected on the user interface

I am currently working on a parent-child component setup. Within the parent component, I have a

BehaviourSubject<SomeObject[]>()

.

export interface SomeObject(){
field: number;
...
editable: boolean
}

Before passing the object to the child component, I need to filter it so that the input value appears as follows:

childInputData = parentBehaviourSubject.value.filter(x=>...);

In the child component UI, there is an edit icon that is visible only if the field editable = false. When this icon is clicked, it should change editable = true and allow certain fields to be edited. My issue arises when trying to pass a cloned array as the child input. When I make the following change:

childInputData = _.cloneDeep(parentBehaviourSubject.value.filter(x=>...));

The UI edit icon no longer responds to clicks. I am unsure of what I am missing here. Can anyone provide insight into why this might be happening?

angular typescript rxjs angular-material ngrx

Answer 1

Answer №1

Is there a specific reason for applying the filter(...) function on an object? This method is typically used for arrays. By calling .value on the behavior subject, you are essentially retrieving the current value and disregarding any future values that may be emitted.

If you intend to pass the current value to the child component each time, it is advisable to pipe the value and subscribe to it (using the async pipe).

The code snippet below generates an observable that contains copies of each emitted value from the parentBehaviourSubject:

childInputData$ = parentBehaviourSubject.pipe(map( val => _.cloneDeep(val) );

To pass this value to your child in the HTML, you can utilize the following code:

<child-component [childData]="childInputData$ | async">
...

Answer 2

Is there a specific reason for applying the filter(...) function on an object? This method is typically used for arrays. By calling .value on the behavior subject, you are essentially retrieving the current value and disregarding any future values that may be emitted.

If you intend to pass the current value to the child component each time, it is advisable to pipe the value and subscribe to it (using the async pipe).

The code snippet below generates an observable that contains copies of each emitted value from the parentBehaviourSubject:

childInputData$ = parentBehaviourSubject.pipe(map( val => _.cloneDeep(val) );

To pass this value to your child in the HTML, you can utilize the following code:

<child-component [childData]="childInputData$ | async">
...

Changing the child component input in Angular's deep cloning cannot be reflected on the user interface

Answer №1

Similar questions

Validation failures frequently occur in the typeahead feature of Angular 2 when using Bootstrap 4, despite a value being selected

Example showcasing the functionality of the react-custom-scrollbars package in a TypeScript React application

A guide to updating a table in Angular using an API response

Is there a way to combine multiple array objects by comparing just one distinct element?

What steps can I take to prevent encountering a Typescript Error (TS2345) within the StatePropertyAccessor of the Microsoft Bot Framework while setting a property?

Having difficulty installing node-sass in an Angular project

Preventing memory leaks in unmounted components: A guide

Angular's ngClass directive failed to be applied correctly

Convert a string into a component

"Utilizing the Power of Typescript with Koa-Router and Passport for a

Unable to access setRowData() in AgGrid/Angular 2 leads to rendering of the grid without displaying any rowData

Angular Refresh Tokens

Table with dynamic rows containing different number of sub-sections

What is the process of converting the Object type returned from an Observable to an array of objects in Angular?

What is the best way to send multiple data using GetServerSideProps?

Creating a custom type in Typescript using a function for testing purposes

What is causing the error message "Module '@reduxjs/toolkit' or its type declarations are not found" to appear?

Upon upgrading to Angular 8, the function this._delegate.setNgStyle is not recognized

Is there a way for me to showcase a particular PDF file from an S3 bucket using a custom URL that corresponds to the object's name

Module not found in Typescript