How to display data from client service in ngx-wheel Angular

Question

I want to display the ngx-wheel using api but I'm having trouble displaying the data. Here my Service :

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class RestServices {

restEndpoint:string = 'https://gorest.co.in/public/v2/users'
constructor(
    private httpClient: HttpClient
  ) { }


  async getServiceId() {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
      })
    }
  return this.httpClient.get(this.restEndpoint, httpOptions)
}

Here my Component :

private subscription: Subscription | undefined;
items: any = []
ngOnInit(): void {
this.subscription = this._restService.getServices()
                                      .subscribe((res:any)=>{
                                          let item = res
                                          this.items = item.map((v:any) => ({
                                            text: v.name,
                                            id: v.id,
                                            textFillStyle: "white",
                                            textFontSize: "16"
                                          }));
                                        })
}
ngOnDestroy(): void {
   this.subscription?.unsubscribe()
}

Here for html

I hope to find the answer here. Thank you

user_7301895 · Answer

First, you don't need await, async and ,toPromise()... remove them and simply return

return this.httpClient.get(this.restEndpoint, httpOptions);

inside your component you should use your constructor only for simple data initialization: if you have to consume a rest api it is a better approach to move that piece of code inside the ngOnInit method:

items: any[] = []
constructor(private restService: RestService){}//dependency injection

ngOnInit(): void {
 this.restService.getServiceId().subscribe(response => {
    console.log('response success: ', response);
    this.items = response; //this may change a little based on your api
    console.log('items: ', this.items);
 }, errorLog => {
    console.log('response error: ', errorLog)
 });
}

The above solution is valid, you can enrich it by adding a *ngIf="isLoaded" on your html element and set to true the isLoaded INSIDE subscribe method. but if you prefer you can do the following in the component.ts

items$: Observable = EMPTY;
constructor(private restService: RestService){}//dependency injection
ngOnInit(): void {
 this.items$ = this.restService.getServiceId();
}

then, in your html it would change to the following:

How to display data from client service in ngx-wheel Angular

1 Answers