How to return object from service to component in angular

Question

I want to access particular json in ngOninit. So i have id on click in edit button and with the help of that id i am getting complete object from database like form name , f

Answer 1

This is not how you should subscribe from observables. You should read up the documentation/tutorial when it comes to handling asynchronous operations (such as HTTP requests). Meanwhile, this is how we can fix your issue.

On your service,

GetFormById (id: number) {
  return this.httpClient.get<FormTemplate[]>(`${this.API_URL}GetFormTemplate/${id}`);
}

On your component.ts, we return the observable value by calling the subscribe() method.

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
  this.dataService.GetFormById(id).subscribe(response => {
    console.log(response);
    const templateObj = response.TempleteJson;
  })
}

Answer 2

You don't subscribe to the Observable in the service class, but instead in the component:

In the service, just return the Observable from your service method:

GetFormById (id: number): Observable<FormTemplate[]>{
    return this.httpClient.get<FormTemplate[]>(this.API_URL + "GetFormTemplate/" + id);
}

In the component you subscribe to the Observable returned by the service method:

ngOnInit() {
  const id = this.route.snapshot.paramMap.get('id');
  this.dataService.GetFormById(+id).subscribe(data => {
    console.log(data);
  });
}

Answer 3

Don't subscribe inside service, subscribe inside component onInit.

GetFormById (id: number) {
    return this.httpClient.get<FormTemplate[]>(this.API_URL + "GetFormTemplate/" + id);
}

ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    this.dataService.GetFormById(+id).subscribe(data => {
      console.log(data);
    })
}