FavoriteLoadingAdd to favorites

If you need to Start a new Angular Project

Angular Basic API Request

Generate a home component

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
ng g c home
ng g c home
ng g c home

– Import HttpClient
Inside your home.component.ts file

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { HttpClientModule } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { HttpClientModule } from '@angular/common/http';
imports: [
HttpClientModule
]
import { HttpClientModule } from '@angular/common/http'; imports: [ HttpClientModule ]
import { HttpClientModule } from '@angular/common/http';
imports: [
  HttpClientModule
]

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
});
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); });
  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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p>home works!</p>
<pre>
{{json}}
{{postData.name}}
{{postData.surname}}
</pre>
<p>home works!</p> <pre> {{json}} {{postData.name}} {{postData.surname}} </pre>
<p>home works!</p>

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

Pin It on Pinterest

Garth Baker
Favorite
Loading
en
af
sq
am
ar
hy
az
eu
be
bn
bs
bg
ca
ceb
ny
zh-CN
zh-TW
co
hr
cs
da
nl
en
eo
et
tl
fi
fr
fy
gl
ka
de
el
gu
ht
ha
haw
iw
hi
hmn
hu
is
ig
id
ga
it
ja
jw
kn
kk
km
ko
ku
ky
lo
la
lv
lt
lb
mk
mg
ms
ml
mt
mi
mr
mn
my
ne
no
ps
fa
pl
pt
pa
ro
ru
sm
gd
sr
st
sn
sd
si
sk
sl
so
es
su
sw
sv
tg
ta
te
th
tr
uk
ur
uz
vi
cy
xh
yi
yo
zu
Share This