Disregarding extraneous object attributes that come with a Back-End object

Seeking advice on how to handle unnecessary object properties that come with a Back-End model.

Could you please share your thoughts?

Imagine an API returning the following object:

export class TodoObject{

public name: string;

public id: number,

public assignedTo:string,

public completed: boolean,

public dueDate:Date

}

In my Angular UI, I don't need the following two fields:

public assignedTo:string,

public dueDate:Date

Can I create an object in Angular UI without these fields as shown below?

export class TodoObject{

public name: string;

public id: number

public completed: boolean

}

Is it feasible to achieve this in Angular? I am aware that GraphQL offers this capability. Interested to know if it can be done.

Is there a way to accomplish this using Ngrx or any other alternative?

Answer №1

Mapping the properties manually is necessary.

const frontEndModel = {
  name: backendModel.name,
  id: backendModel.id,
  completed: backendModel.completed
}

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

Encountering a problem with Angular FormGroup losing focus when a key is pressed, preventing the entry of more than one character

Currently, I am attempting to iterate through form controls in order to display fields. While the fields are being shown without any issues and properly binding values upon saving, I have encountered a problem. Whenever I press a key on these fields, the c ...

The element is implicitly assigned an 'any' type as the expression of type 'string' is unable to be used as an index within the type '{...}'

Trying to improve my react app with TypeScript, but encountering issues when typing certain variables. Here's the error message I'm facing: TypeScript error in /Users/SignUpFields.tsx(66,9): Element implicitly has an 'any' type becaus ...

Navigating the missing "length" property when dealing with partial functions generated using lodash's partialRight

I've been utilizing MomentTimezone for time manipulation within the browser. My development stack includes TypeScript and Lodash. In my application, there is an accountTimezone variable set on the window object which stores the user's preferred ...

What are the different methods to display information in Angular?

list.component.ts import { Component, OnInit } from '@angular/core'; import { StudentAPIService } from 'src/app/services/student-api.service'; import { StudentModel } from 'src/app/model/student'; @Component({ selector: &ap ...

What could be the reason for the HttpEventType.UploadProgress event only triggering once during an Angular file upload request?

I am currently working on implementing file uploads in Angular and am looking to display the upload progress as well. upload.service.ts public uploadProductImage(obj: FormData, id: string) { return this._http.post(baseUrl + `/product/upload`, obj, { ...

What is the best way to list the choices associated with a specific category?

The Node.js package I'm currently working with requires an argument of a specific type, which I can see is defined through a TypeScript declaration as follows: export declare type ArgType = 'A' | 'B' | 'C'; I am interes ...

Angular: Leveraging real-time data updates to populate an Angular Material Table by subscribing to a dynamic data variable in a service

Seeking guidance on how to set up a subscription to a dynamic variable (searchData - representing search results) for use as a data source in an Angular Material Table. I have a table-datasource.ts file where I want to subscribe to the search results from ...

Tips for patiently awaiting data before constructing an object

Currently, I am uploading image files to a server and returning the download URL and upload percentage with my upload method. Looking ahead, I plan to enhance this functionality to allow for the upload of multiple images using the same component. The goal ...

An issue has occurred: The module named 'ApprovalModule' must be compiled using the JIT compiler, however, the necessary compiler '@angular/compiler' is not currently accessible

Issue: Error: The NgModule 'ApprovalModule' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available. JIT compilation is not recommended for production environments. Consider using AOT mode instead. Alterna ...

Creating Dynamic Routes and Implementing Component Restrictions in Angular 2

Currently in the midst of designing an Angular 2 application, I find myself faced with some fundamental questions that could significantly impact the overall design. I'm struggling to determine the "right angular way" to address these concerns. Here a ...

React: The Material-UI autocomplete input, controlled with the React Hook Form `<controller>` component, experiences issues when the `multiple` prop is set to `true`

Currently facing challenges with managing an autocomplete MUI component using the <controller> component in react-hook-form. Take a look at the code snippet below: <Controller control={control} name="rooms" render={({ field }) =&g ...

a user-friendly database solution for storing data in HTML 5 and Google Drive

Greetings, I am currently faced with the following dilemma: As I work on my angular 2 application, I find myself needing to save certain data. Personally, I have a preference for saving data in JSON format. Here is the scenario: Imagine a todo list where ...

What is the reason for the 'ng version' command returning a blank line as a response?

... Along with all other ng commands. Greetings! Recently, I decided to reinstall node.js due to a persistent issue, however, the problem still remains. https://i.sstatic.net/BZpkIszu.png After the reinstallation, I executed the initial commands. Npm i ...

Tips for concealing information within the column labeled company Name with respect to the field designated as Company Name

I am currently working on an Angular 7 app and I am facing an issue: I cannot hide the data in the column for Company Name. The field "Name" in the report control JSON is labeled as Company Name. The report control is a table that contains various fields ...

Combining and arranging numerous items in a precise location in three.js

I am currently working on a web application using three.js with Angular and facing some challenges when trying to set the precise positions of objects. The requirement is to load various objects and position them in specific locations. In order to load di ...

Discovering the best way to organize and sort information retrieved from the backend within an Angular

How can I restrict a user to only search for data that has been provided from the backend and prevent them from creating new data? In my backend, there are two words: "Chart" and "Map". I am looking for a way to limit the user's search to only these ...

Eureka - Spring Cloud Services: Discover the Benefits

Currently, I am diving into the world of microservices with Spring and Spring Boot, looking to deploy my work onto a cloud platform. My goal is to develop an Angular 2 frontend application that interacts with my deployed microservice. Right now, I am exp ...

Setting multiple values on a form can be accomplished by using the appropriate form fields

When it comes to setting values on fields, I am aware that I can choose between using setValue or patchValue However, I am currently encountering a situation where I need to avoid setting the value on each field individually. Take a look at my f ...

Exploring the power of Angular 2 Directive scopes

When it comes to Angular2, Directives do not come with "scopes", unlike Components. However, in my specific case, I require a Directive to establish a scope. Take a look at my App component - it contains an HTML template, and the foo directive could potent ...

The primary export is not a React Component on the specified page: "/"

Encountering an error while attempting to use compiled code from Typescript to Javascript with Next.js Error message: The default export is not a React Component in page: "/" Seeking assistance on how to resolve this issue. Any help would be greatly appr ...