Angular 2 HttpClient service in a custom class

Question

Just to continue with my custom class in Angular 2/4 that I've started at: methods in angular typescript class are null after http get , now I want to go one step beyond.

This is my custom original class:

export class Book{
    id: number,
    title: string;
    author: string;
    read: integer;
    author: string;

    constructor() {
    }

    public incRead(times: integer){
        this.read = this.read + times;
    }
}

To consume this class from components I use it this way:

this._httpClient.Get<Book[]>(url).subscribe().map(
    (books: Book[]) => {
        const tempbooks = new Array<Book>();
        books.forEach(book => {
            tempbooks.push(Object.assign(new Book(),book);
        }
        return tempbooks;
    }
)

As in HttpClient not running constructor, and this way I can call the incRead method from the component.

Now I would like to add a "post" method, something like this:

export class Book{
    id: number
    title: string;
    author: string;
    read: integer;
    author: string;

    private httpClient: HttpClient;

    constructor() {
    }

    public incRead(times: integer){
        this.read = this.read + times;
    }

    public post(): Observable(boolean)
        return this.httpClient.post<boolean>(url + Book.id.toString());
}

But I can't get a way to inject HttpClient service. I've tried with

const injector = ReflectiveInjector.resoveAndCreate([HttpClient]);
this.httpClient = injector.get(HttpClient)

in the constructor but I get an error about the Backend parameter at the injector get method that is necessary to create the HttpClient instance.

I have been trying diferent options

creating external service to inject the HttpClient (as in Get angular 2 service inside a custom class instantiated by me) but I get the same error as with the ReflectiveInjector solution.
Pass the service from the component as a parameter to the constructor, but it's not compatible with the Object.assign(new Book(), book).

Maybe I'm using a bad approach to create a custom classes in Angular (based on in my OOP past developments) and there is some other way to detach classes from components that I'm missing.

Please be kind, I've done my homework and didn't find anything that gets me in the correct direction without "hairy" code.

If you really want to do that, why don't you just use `new Book(this._httpClient)` instead of `new Book()`? — JB Nizet, Dec 18 '17 at 19:29
The normal approach is to create injectable services (dependencies are resolved by angular) that take care of all Http interactions with your back end. I can imagine that you want to add this functionality to your domain model for some reason, but this is definitely not the angular way. If you still want to, it means that you need to inject the httpclient instance into the constructor of your class, as suggested by @JBNizet — Jota.Toledo, Dec 18 '17 at 19:33
it's probably better to create a service annotated with @Injectable, that gets the HttpClient injected and using it creates instances of Book. — toskv, Dec 18 '17 at 19:33
I've done so but when I instantiate it asks for the HttpClient, so I have to add the same parameter at the method in each consumer of the class. Wouldn't it be clear if I can encapsulate the HttpClient in the custom class? — JoeCool, Dec 18 '17 at 19:44
Using instances of the class in components that includes the angular services they need, leads to a clear separation of concerns and keeps code more maintainable. Or maybe I'm wrong and should try it using services the "angular way" — JoeCool, Dec 18 '17 at 19:51
It is not enough to decorate service with @Injectable - you also need to mention your service in providers list in the module it belongs to. — Pavel Agarkov, Dec 18 '17 at 20:30

Angular 2 HttpClient service in a custom class

0 Answers0