Expanding on the http class to utilize custom properties within Angular2 typescript

Question

Expanding on the http class to utilize custom properties within Angular2 typescript

I have developed a CustomHttp class that extends Http similar to the example provided here:

To integrate this CustomHttp class, I included providers in the bootstrap function as shown below:

bootstrap([
    HTTP_PROVIDERS,
    { provide:Http,
        useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, errorNotifier: NotificationHandlerService, 
                     authService: AuthInfoService) => {
            return new CustomHttp(backend, defaultOptions, errorNotifier, authService);
        },
        deps: [ XHRBackend, RequestOptions, NotificationHandlerService,  AuthInfoService]
    },
  ])

All overridden methods like get and post are fully functional. However, when I added a custom property and method to the CustomHttp class, I encountered an issue trying to access it from outside the CustomHttp:

@Injectable()
export class CustomHttp extends Http {

...
private myCustomProperty = 'It's custom';

public getCustomProperty() {
    return this.myCustomProperty;
}
...

}

=====================

import {Http} from '@angular/http';

export class MainComponent {

    constructor(private _http: Http) {
       this._http.getCustomProperty(); // this method doesn't exist in Http
    }
}

Can anyone suggest how to access custom methods and properties of CustomHttp?

typescript angular

Answer 1

Answer №1

To implement this functionality, you can attempt the following approach which involves type casting from Http to CustomHttp:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { CustomHttp } from './custom.http';

@Injectable()
export class BooksService {

  constructor(private http:Http) {
    console.log((<CustomHttp>this.http).someProperty);
  }

  (...)
}

Utilize the CustomHttp class shown below:

@Injectable()
export class CustomHttp extends Http {
  someProperty:string = 'some string';

  (...)
}

Answer 2

To implement this functionality, you can attempt the following approach which involves type casting from Http to CustomHttp:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { CustomHttp } from './custom.http';

@Injectable()
export class BooksService {

  constructor(private http:Http) {
    console.log((<CustomHttp>this.http).someProperty);
  }

  (...)
}

Utilize the CustomHttp class shown below:

@Injectable()
export class CustomHttp extends Http {
  someProperty:string = 'some string';

  (...)
}

Answer 3

Answer №2

import {HttpClient} from '@angular/common/http';
import {CustomService} from '/another/path';

export class DisplayComponent {

    constructor(private _httpClient: CustomService) {
       this._httpClient.getCustomData(); 
    }
}

Answer 4

import {HttpClient} from '@angular/common/http';
import {CustomService} from '/another/path';

export class DisplayComponent {

    constructor(private _httpClient: CustomService) {
       this._httpClient.getCustomData(); 
    }
}

Expanding on the http class to utilize custom properties within Angular2 typescript

Answer №1

Answer №2

Similar questions

Angular 7: Show selected value upon clicking Radio button

Counting up in Angular from a starting number of seconds on a timer

Angular2 material select component is malfunctioning

`"Type is invalid" error occurring with component after importing it into a different project``

Utilizing a Custom Validator to Compare Two Values in a Dynamic FormArray in Angular 7

What is the best way to hide certain buttons from specific users in Angular using the If condition?

Disabling an anchor using the 'disabled' property is proving to be a challenge for me

Angular 2: Streamlining user interface connections with extensive data rows

Exploring the Angular 4 Cronstrue Idea: Transforming cron syntax into readable strings[From CronJobs to Cronstrue]

Utilizing props in styled-components: A beginner's guide

Is there a way to prevent IntelliJ from creating .js files when working with .ts source code?

Navigating conflicts between packages that utilize TypeScript can be tricky. Here are some strategies for handling these situations

Issue: The formGroup function requires a valid FormGroup instance to be passed in. Data retrieval unsuccessful

Creating custom disabled button styles using TailwindUI in a NextJS application

Experiencing a typeerror with the Event attribute

Instead of tapping the enter key, try searching by keying up

Setting multiple dynamic values for select inputs in reactive forms can be achieved by following these steps

I am facing an issue with my interface - the variable designed to store boolean values

What could be causing the Properties Array to come back as undefined?

What is the best way to apply DateRange filtering in a Kendo Ui Grid?