Code2night
  • Home
  • Blogs
  • Tutorial
  • Post Blog
  • Tools
    • Json Beautifier
    • Html Beautifier
  • Members
    • Register
    • Login
  1. Home
  2. Blogpost
10 May
2023

How To Consume Web API Using Angular

by Shubham Batra

76

Download Attachment

Create an Angular Project using CLI

$ ng new web-api-in-angular
This will prompt you some options like adding routing and stylesheet selection, you can select as per your need. Next, you can run your application by using the below command.
$ cd web-api-in-angular
$ ng serve --open
now it will automatically redirect to http://localhost:4200. You’ll now see your application running.
Add service file
In this file, we will configure the HttpClient.
Generate service file using CLI by the below command,
$ ng generate service api

This will generate the service file in this location – src/app/api.service.ts. Before editing the service file, we have to import HttpClientModule inside src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CountryListComponent } from './country-list/country-list.component';

@NgModule({
  declarations: [
    AppComponent,
    CountryListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Now we have to inject HttpClient inside the service file – src/app/api.service.ts


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class ApiService {
  constructor(private httpClient: HttpClient) { }

  public getCountry(){
    return this.httpClient.get('https://restcountries.com/v3.1/all');
  }
}

We are done with the basic setup of HttpClient and the service file. To Generate a component where we will list the API response data. Use the below CLI command to generate component

$ ng generate component countryList

This will generate a component for you in – src/app/country-list/. Once the component is generated we need to add the routing for that component.

Adding route

Edit and add the below code in src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CountryListComponent } from './country-list/country-list.component';
const routes: Routes = [
  {path:'country-list', component: CountryListComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Now go to http://localhost:4200/country-list you can see the countryList component will be loaded. Using the service file to call the API and getting the data in the component.
Open the component and add the below code.

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-country-list',
  templateUrl: './country-list.component.html',
  styleUrls: ['./country-list.component.scss']
})
export class CountryListComponent implements OnInit {
  countryList: any;

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.apiService.getCountry().subscribe((data) => {
      console.log(data);
      this.countryList = data;
    });
  }
}

Save and run the application and check the log, you will be able to see the list of all countries. Let’s populate the received data into a template for a good look.
Edit your template file and add this – src/app/country-list/country-list.component.html

<div *ngFor="let country of countryList">
    <div >
        <h3 style="display: inline-block;padding: 0px 60px 0px 15px;">CountryName</h3><span>{{country.name.common}}</span>
        <h3 style="display: inline-block;padding: 0px 60px 0px 150px;">Capital</h3><span>{{country.capital}}</span>
    </div>
</div>

run the project by following the command 

ng serve --open


  • |
  • How To Consume Web API Using Angular , Angular API , angular get api

Comments

Follow Us On Social Media - Like Us On Facebook

Best Sellers

product 1

Hand Hug Bracelet For Women Men Cuff Bangle Adjustable Lover Couple Bracelets

Can be given as a gift to your family, relatives, or friends

Buy $15.99
product 1

Teddy bear hug bear plush toy bear cub

Can be given as a gift to your family, relatives, or friends


Buy $49.99

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Thank you for Downloading....!

Subscribe for more tutorials

Support our team

Continue with Downloading

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2023 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier