Angular Basic API Request

by | Oct 22, 2019 | Angular

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>

Getting Started With a New Angular Project

by | Sep 12, 2019 | Angular

->ng new AppName
->Add SCSS (I was informed it's the convention with angular)
->cd AppName
->ng add @angular/material
->Setup Hammer JS for gesture recognition 
  :YES
->Set up browser animations for Angular Material 
  :Yes
->npm install
->ng serve

All of this is from terminal / command prompt