Data not shown on UI despite Http Service getting Called [duplicate]

Question

Call doesnt work due to upgrades in RXjs version 6 is incorporated in angular version8. for complete source code see:- https://github.com/ankit01122/CRUDApp

import { Component } from '@angular/core';
import {ServicexampleService} from './servicexample.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'CRUDApp';
  heroes: object;

  constructor(private serviceExample: ServicexampleService) {
    this.heroes = serviceExample.returnABC();
  }
  getHeroes(): void {
    this.heroes = this.serviceExample.returnABC();
  }
}

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ServicexampleService {
  private httpClient: HttpClient;
  private abc: Observable<object>;

  constructor( httpClient: HttpClient ) {
    this.abc =  httpClient.get('https://jsonplaceholder.typicode.com/todos/1');
      }

 public returnABC = (): Observable<object> => this.abc;
}

Service should get executed and get data on http://localhost:4200/

Answer 1

You have to subscribe to your observable or it wont work.

this.serviceExample.returnABC().subscribe(
    data => {
        this.heroes = data;
    }
)
;

Answer 2

Observables are lazy and they will not execute unless you ask them to. You can do it in two ways. One is to subscribe as in Sam's reply.

Or use async pipe to do the job for you. Async pipe will automatically unsubscribe while when you do subscribe you should take care of the un-subscribe part yourself. http://reactivex.io/rxjs/manual/overview.html#observable

Answer 3

It is better not to call http in constructor.

Instead it is a better practice to inject http in your constructor and then make the request inside your method. Every httpClient call returns an Observable so in order to retrieve the response you have to subscribe to it.

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';

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

  constructor(private httpClient: HttpClient ) {

   }

 public returnABC(): Observable<any> {
     return this.http.get<any>('https://jsonplaceholder.typicode.com/todos/1);
 }
}



import { Component } from '@angular/core';
import {ServicexampleService} from './servicexample.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'CRUDApp';
  heroes: object;

  constructor(private serviceExample: ServicexampleService) {

  }

  ngOnInit() {
      // in case you want to get heroes on init
      this.getHeroes()
  }
  getHeroes(): void {
    this.serviceExample.returnABC().subscribe(response => {
            this.heroes = response;
        });
  }
}