Should I inquire about object information in the parent or the child?

When working with a table containing a list of objects and offering users the option to edit these objects, I find myself questioning whether to utilize the API in the parent component (object list), the child component (individual object), or both. Is it possible to streamline this process by replacing two API calls with just one observer using RxJS in the parent component and passing data via @Input to the child component? Would this be a practical and efficient approach?

ParentList(){
  listObjects$: Observable<Object[]>;

   this.listObjects$.pipe(take(1)).subscribe(list => {
     //Assign listObjects
   });
}
ChildForm(){
  @Input() object$!: Observable<Object>;

}

I attempted to make separate API service calls for each instance.

Answer №1

My recommendation is to either call the API from the child component or the parent component, not both simultaneously.

When deciding whether to call the API from the parent or child component, consider the following:

  • If the API only accepts one object for editing in each request, it's more efficient to call it from the child component.
  • On the other hand, if the API can handle multiple objects in a single request, it's best practice to make the call from the parent component. You can transfer all edited objects from the child component to the parent before triggering the API call.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for a class that implements an interface to have additional fields not defined in the parent interface?

Looking at the code snippet below, my aim is to ensure that all classes which implement InterfaceParent must have a method called add that takes an instance of either InterfaceParent or its implementing class as input and returns an instance of InterfacePa ...

Patience is key as you wait for the map function to complete in TypeScript

I am facing an issue with the for each loop not waiting for the map function to finish, resulting in undefined ids. How can I ensure that all the ids are properly mapped? getIndexes(){ this.http.get<{data: {id: number, caption:string}[], paging: any, ...

React encounters an unfamiliar issue: "index.js:63 Uncaught TypeError: Unable to access property 'nodeName' of a null value"

Utilizing React and Bootstrap to generate a dialog (removed unnecessary elements, but encountering persistent error): import React, { Component, } from 'react'; import { Modal, } from 'react-bootstrap'; class MyDialog_Mul ...

There are several InputBase elements nested within a FormControl

There seems to be an issue: Material-UI: It appears that there are multiple InputBase components within a FormControl, which is not supported. This could potentially lead to infinite rendering loops. Please only use one InputBase component. I understand ...

The attribute 'size' is not recognized within the data type 'string[]' (error code ts2339)

When using my Windows machine with VSCode, React/NextJS, and Typescript, a cat unexpectedly hopped onto my laptop. Once the cat left, I encountered a strange issue with my Typescript code which was throwing errors related to array methods. Below is the co ...

Configuration options for Path Aliases in TypeScript

In my Next.js project, I am utilizing TypeScript and have organized my files as follows: |-- tsconfig.json |-- components/ |---- Footer/ |------ Footer.tsx |------ Footer.module.sass My path aliases are defined as:     "paths": {       ...

Developing custom events in an NPM package

Developing a basic npm package with signalr integration has been my recent project. Here's how it works: First, the user installs the package Then, the package establishes a connection using signalr At a certain point, the server triggers a function ...

Creating div elements that correspond to the parameters in an array

Struggling with rendering parameters in Angular 8, I'm fetching data from an API that needs to be displayed in divs corresponding to the data. The issue arises when the data is displaying in every div, instead of being limited to specific ones. Here&a ...

Troubleshooting TypeScript errors in a personalized Material UI 5 theme

In our codebase, we utilize a palette.ts file to store all color properties within the palette variable. This file is then imported into themeProvider.tsx and used accordingly. However, we are encountering a typescript error related to custom properties as ...

Custom font for Ionic styling

Greetings! I come to you with a query regarding font usage. Note: I am developing an app for mobile devices (iOS, Android) using Ionic with Angular. I am looking to incorporate the Poppins font into my application. It works perfectly when accessed on a P ...

In Safari, Angular 6 fails to display data points when a component is routed to the d3/event-drops

After creating a test app to replicate the current issue, I have come across an interesting problem. Here is the link to the codebase: https://github.com/mohammadfarooqi/event-drops-d3-test-app. You can also view a sample demo deployed (recommended in saf ...

Attempting to troubleshoot an issue with asynchronous operations that are returning an observable

When I console log my .then() function, it only gives me an observable. How can I retrieve the actual data that is being returned? I've been struggling to solve my async/await issue and haven't been able to figure out a solution. Currently, my p ...

Manipulating data in Angular using RxJs - Creating, Reading,

public ngOnInit() { this.fetchUsers(); } public fetchUsers() { this.userService.getUsers(this.listId).pipe(take(1)).subscribe(data => { if (data.result.length) { this.users = data.result; } else { const user = new UserModel(); ...

Guide on automatically opening downloaded files in a new tab in IE 11 or Edge similar to the way file downloads function in Chrome

I am currently using Windows 10 and implementing msSaveOrOpenBlob in JavaScript to download the AJAX call blob on IE11. I want the PDF file to be opened in a new tab without any prompts, similar to how it works in Chrome. However, even when trying with th ...

Exploring the capabilities of multiple router-outlets and submodules within Angular 5

Despite my extensive review of the documentation and other questions, I am still struggling to find a suitable solution for my project. I decided to steer clear of the named router-outlets option as it results in a less clean URL. It seems that many of the ...

Ways to evaluate the properties of two objects in Angular

On clicking the add new button in my form, I am dynamically adding a new row. The newly entered data is stored in the oldData array as an object. I need to compare all values in the newData object with the objects in the oldData array. If there already ex ...

Blank webpage caused by ngx TranslateService

Every time I attempt to translate Angular components using ngx-translate/core by utilizing the translateService in the constructor, the page appears blank. This is my appModule : import { NgModule } from '@angular/core'; import { BrowserModule } ...

error occurs when trying to update angular-cli

XYZ$ sudo npm install -g angular-cli@latest npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62010e07150c01024d030c0930514f514f514c020415014f53594f52">[email protected]</a>: angular-cli has been ...

What is the method for utilizing enum values as options for a variable's available values?

I'm curious about using enum values in TypeScript to restrict the possible values for a variable. For example, I have an enum named FormType with Create and Update options. Is there a way to ensure that only these enum values are used? enum FormType { ...

How to set a dynamic name for the input with ngModel in Angular 7

Is there a method to generate the "ngModel" parameter in template-driven forms with a dynamic name (for example, using a loop)? I am hoping to achieve something like: <div *ngFor='let d of items; let i = index;'> <input type="text" ...