Step1: Create Service 

ng g s Httpserviceex

Step 2: Write Following Code in Httpserviceex.ts

import { Injectable } from '@angular/core';
import { Http , Response , Headers} from '@angular/http';
@Injectable()
export class HttpserviceexService {

  constructor(private _http : Http) { }
  getdata()
  {
    return this._http.get("http://apitest.barchraj.org/api/StudentEnquiry_WebAPI").map((response: Response) => response.json());
  }
  senddata(user: any)
{
  const body = JSON.stringify(user);
  const header = new Headers();
  header.append("Content-Type","application/json");
  return this._http.post('http://apitest.barchraj.org/api/StudentEnquiry_WebAPI', body ,{ headers: header }).map((data: Response) => data.json() );
  
}


}

Step 3: Pass reference of Service into app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Http , HttpModule } from '@angular/http';
import { FormsModule , ReactiveFormsModule  } from '@angular/forms';
import { DataserviceService } from './dataservice.service';
import { AppComponent } from './app.component';
import { MycomponentComponent } from './mycomponent/mycomponent.component';
import { Mycomponent1Component } from './mycomponent1/mycomponent1.component';
import { Mycompoent2Component } from './mycompoent2.component';
import { PropertyexComponent } from './propertyex.component';
import { PipesexComponent } from './pipesex.component';
import { MycustompipePipe } from './mycustompipe.pipe';
import { Routes, RouterModule } from '@angular/Router';
import { NgstyleexComponent } from './ngstyleex.component';
import { Form1Component } from './form1/form1.component';
import { Form2Component } from './form2/form2.component';
import { Form3Component } from './form3/form3.component';
import { HomeComponent } from './home/home.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { QueryparamexComponent } from './queryparamex/queryparamex.component';
import { FormbuilderexComponent } from './formbuilderex/formbuilderex.component';
import { TestcustomvalidatorComponent } from './testcustomvalidator/testcustomvalidator.component';
import { UseservicesComponent } from './useservices/useservices.component';
import { HttpexComponent } from './httpex/httpex.component';
import { HttpserviceexService } from './httpserviceex.service';

const AppRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutUsComponent },
  { path: 'Home', component: HomeComponent },
  { path: 'ContactUs', component: ContactUsComponent }
]
@NgModule({
  declarations: [
    AppComponent,
    MycomponentComponent,
    Mycomponent1Component,
    Mycompoent2Component,
    PropertyexComponent,
    PipesexComponent,
    MycustompipePipe,
   
    NgstyleexComponent,
   
    Form1Component,
   
    Form2Component,
   
    Form3Component,
   
    HomeComponent,
   
    ContactUsComponent,
   
    AboutUsComponent,
   
    QueryparamexComponent,
   
    FormbuilderexComponent,
   
    TestcustomvalidatorComponent,
   
    UseservicesComponent,
   
    HttpexComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    RouterModule.forRoot(AppRoutes)
  ],
  providers: [DataserviceService , HttpserviceexService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4. Create new component

ng g c httpex

 

Step 5. Write following code into component

import { Component, OnInit } from '@angular/core';
import { Response } from '@angular/http';
import { HttpserviceexService } from '../httpserviceex.service';
import 'rxjs/Rx'; 

@Component({
  selector: 'app-httpex',
  templateUrl: './httpex.component.html',
  styleUrls: ['./httpex.component.css'],
  providers: [HttpserviceexService]
})
export class HttpexComponent implements OnInit {

  myarray : any[];
  constructor(private obj :  HttpserviceexService) { }

  ngOnInit() {
    this.obj.getdata().subscribe(
      data => this.myarray = data
    );
  }
  ngOnChanges()
  {
    this.obj.getdata().subscribe(
      data => this.myarray = data
    );
  }
  getfreshdata()
    {
      this.obj.getdata().subscribe(
        data => this.myarray = data
      );
    }
    subdata(name: string, email: string ,mobile: number)
    {
      this.obj.senddata({name: name, email: email, mobile: mobile}).subscribe( data => console.log(data));
      this.obj.getdata().subscribe(
        data => this.myarray = data
      );
    }
    
  
  

}

Step 6. Run your Program

ng serve –open

Output