How to make an API call from Angular ? Connect Angular app to Node REST API.
{% include youtube_embed.html id=“RSJxWJ6dCL4” %}
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