app.module.ts
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { AppComponent } from ‘./app.component’;
import { ProductComponent } from ‘./product/product.component’;
import { HttpClientModule } from ‘@angular/common/http’;
import { HttpClient } from ‘@angular/common/http’;

@NgModule({
declarations: [
AppComponent,
ProductComponent
],
imports: [
BrowserModule,
AppRoutingModule ,
HttpClientModule,
HttpClient
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

product.component.ts

import { Component, OnInit } from ‘@angular/core’;
import { Observable } from ‘rxjs’;
import { HttpClient } from ‘selenium-webdriver/http’;
import ‘rxjs/Rx’;
import { HttpClientModule } from ‘@angular/common/http’;

@Component({
selector: ‘app-product’,
templateUrl: ‘./product.component.html’,
styleUrls: [’./product.component.css’]
})
export class ProductComponent implements OnInit {

dataSource:Observable;
products:Array = [];

constructor(private http:HttpClient) {
this.dataSource = this.http.get(’’)
.map((res: Response) => {
res.json();
})
}

ngOnInit() {
this.dataSource.subscribe(
(data)=>this.products=data
)
}

}