Angular Basic API Request

Add to favorites

If you need to Start a new Angular Project

Angular Basic API Request

Generate a home component

ng g c home

– Import HttpClient
Inside your home.component.ts file

import { HttpClientModule } from '@angular/common/http';

Import your HTTP CLIENT in your app.module.ts and also add it to your imports

import { HttpClientModule } from '@angular/common/http';
imports: [
  HttpClientModule
]

Below is an example demo api. Paste it over your constructor inside your home.component.ts

  postData = {
    name: 'Garth',
    surname: 'Baker'
  };
  url = 'http://httpbin.org/post';
  // url2 = 'https://rest.clientele.co.za/api/echo/hello';

  constructor(private http: HttpClient) { 
    this.http.post(this.url, this.postData).toPromise().then(data => { 
      // console.log(data.json.name); 
      // this.json = JSON.stringify(data.json.name); 
      // console.log(data); 
      this.json = JSON.stringify(data.json); 
    });

Inside your home.component.html paste this

<p>home works!</p>

<pre>   
    {{json}}
    {{postData.name}}
    {{postData.surname}}
</pre>