Make API Call From Angular | Connect Angular to Node REST API

How to make an API call from Angular ? Connect Angular app to Node REST API.

Import HttpClientModule

Start by importing HttpClientModule in your app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http'; 

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

Import the HttpClient in the component or service from where you are making the API call.

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

Create an instance of the HttpClient.

constructor(private  http : HttpClient){}

Configure Proxy

Since the API is running on a different port from the Angular app, you need to configure the proxy. Checkout how to make proxy configurations in Angular app.

Once you have the configurations in place you can use the http instance to make the API call.

this.http.get('/api/getData').subscribe(response => {
   console.log('response is ', response);
})

Run your Angular app with the proxy configuration.

ng serve --proxy-config proxy.conf.json