Extract "Actual Components" (variables and functions) from a Rest API using Angular HttpClient

Recently, I encountered a similar issue to the one discussed in this post.

Since the original question was posted in 2017, I was curious if there have been any advancements or simpler methods developed since then.

One idea that came to mind was using an HttpInterceptor to streamline services and classes, like the example below:

@Injectable({
  providedIn: 'root'
})
export class ExampleService {
  constructor(private http: HttpClient) { }

  getHouse(): Observable<House> {
    return this.http.get<House>("MyRestPath");
  }
}

And a class utilizing this service might look something like this:

someRandomMethod(): void {
    this.exampleService.getHouse().subscribe(house => {
      console.log(house.doSomething()) // Pay attention to the method being called here
      console.log(house.address) // And also accessing a field
    })
  }

Is it feasible to implement this approach, or do we still need to resort to the methods outlined in the previous question/answers?

Answer №1

One approach to managing this would be through the use of interceptors. This method could seem almost magical to developers tasked with maintaining the code. However, it does pose a combination of concerns as the HTTP client would need to request data from the backend and then encapsulate it in another object. Following the single responsibility principle would advise against this. It would be more appropriate to handle such logic within a service.

export class ExampleService {
  constructor(private http: HttpClient) { }

  getHouse(): Observable<House> {
    return this.http.get<HouseDto>("MyRestPath")
               .pipe(map(house => new House(house)));
  }
}

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

Visualization of pie charts in Angular2 using Google library

Currently, I am in the process of building a web application using Angular2 that includes a Google pie chart. One of the components of the application is a Directive specifically designed for the pie chart. Below is the code snippet for the Directive: @D ...

The routing system in Angular 4 seems to have trouble functioning properly when accessed from within the Laravel public folder

Currently, I am facing a challenge with deploying my Laravel JSON API which is being used by an Angular 4 application. During deployment, I utilize Forge and place the contents of the "dist" folder within Laravel's public directory. However, I am enco ...

Is there a way to determine the most recent Typescript target compatibility for every Node version?

When using any version of Node, how can I identify the appropriate Typescript Compiler Option for target that offers the most functionality? I want to eliminate any guesswork. Specify the ECMAScript target version as: "ES3" (default), "ES5", "ES6"/"ES20 ...

Generate the Ionic build and save it to the /dist directory instead of the /www

Every time I execute the command ionic build, it generates a fresh /dist directory containing all the same files that are typically found in the /www directory. Despite my attempts to make updates to the /www folder, only the /dist folder gets updated. Wha ...

Is it impossible to Build your Angular project?

After updating my current project from Bootstrap 4 to Bootstrap 5, I encountered an issue where Jenkins is unable to build the project. The error message displayed is quite cryptic: An unhandled exception occurred: Cannot destructure property 'bold&ap ...

ngFor filter based on user input

I am working on a 2-step stepper feature where I need to filter the values in my amountArray based on the age of the person. If the person is above 50 years old, display only the values 10000 and 15000. For Euro currency, show values 25000 and 50000. I att ...

What is the procedure for adding a background to a primeNg Tree component?

Working with Angular CLI 6 and primeNg version 6.0.1 I have been attempting to customize the background of the tree component without success. When I try using style="background:red" in the HTML file, the tree display becomes distorted with a height of on ...

Challenges with TypeScript build in DevOps related to Material UI Box Component

Currently, I am facing an issue while trying to build a front end React Typescript application using Material ui in my build pipeline on Azure DevOps. The problem seems to be related to the code for the Material ui library. Despite successfully building th ...

Destiny does not uncover personalized typing

I am currently setting up a test for a component that utilizes a third-party JavaScript library. Everything works smoothly in the project scenario, but when I attempt to run the standard stand in Karma, an error is triggered: typing_name is not defined ...

Getting access to a child component function within the UI-VIEW in Angular 2

I am working on a project that involves both angular 1.5 and angular 2. In my project, I have two sibling components: First-component and Second-component. The First-component contains a Toggle button, while the Second-component has a UI-View of angular 1. ...

Is it possible to utilize an angular 1 template in conjunction with angular 2?

I am currently working on developing a real-time reactive admin dashboard for a Dashboard/POS system. While I primarily work with Java and have experience with .net, I have recently started practicing with the MEAN stack for creating real-time web applicat ...

Lack of Intellisense in Sveltekit for the generated $types module on WebStorm

Is there a setting in WebStorm to enable intellisense for automatically generated ./$types by SvelteKit? I'm writing without any minimal example, just curious. Everything is done according to SvelteKit's documentation. Using satisfies LayoutLoad ...

The template for the AppComponent is experiencing an error

Every time I run 'ng serve' command, I encounter the following error: src/app/add-dog/add-dog.component.html:8:36: 8 │ <input type="text" [(ngModel)]="formData.breed" /> ╵ ...

How to delete an item from an object in TypeScript

Can you help with filtering an object in Angular or TypeScript to eliminate objects with empty values, such as removing objects where annualRent === null? Additionally, what method can we use to round a number like 2.833333333333335 to 2.83 and remove the ...

Troubleshooting an Angular application

Just diving into Angular and following along with the tutorial on https://angular.io/tutorial. However, I seem to be facing an issue in Chrome where the const HEROES is not available in my watch list. It keeps showing as "not available". What could be ca ...

Utilizing numerical values in useParams - A beginner's guide

Trying to access specific data from my json file using an ID, like "http://localhost:3001/pokemons/3", leads to a 404 error. All the data is visible at http://localhost:3001/pokemons. It seems that useParams doesn't want me to use id as a number - q ...

Leverage TypeScript AngularJS directive's controller as well as other inherited controllers within the directive's link function

I am currently developing an AngularJS directive in TypeScript for form validation. I am trying to understand how to utilize the directive's controller and inherit the form controller within the directive's link function. Thank you in advance! ...

Typescript is issuing warnings when displaying errors for the RTK query

I am currently using React Ts and Rtk query. My goal is to display the API response error on the UI. While it's working, I am encountering a warning that prompts me to set an error type for the response errors. How can I incorporate an error type for ...

NgMap is encountering an issue with an unfamiliar provider: NgMapProvider <- NgMap, raising a concern

While utilizing ngMap, it encountered an error. I have carefully reviewed all components and settings. Interestingly, it works flawlessly in one part of my application but not in the other. These two instances are located in separate file locations. ...

Issue encountered with passport-local in TypeScript: Unable to utilize 'new' with an expression that does not have a call or construct signature

Currently, I am attempting to implement the passport-local package in TypeScript (version 2.0.0RC); however, a compiler error has arisen: Error TS2351: It is not possible to use 'new' with an expression lacking a call or construct signature. ...