API calling in Angular

Check the below links
https://www.knowledgehut.com/blog/web-development/make-api-calls-angular
https://medium.com/bb-tutorials-and-thoughts/how-to-make-api-calls-in-angular-applications-ab5364cf9533
https://dzone.com/articles/how-to-make-a-rest-api-call-in-angular

Hi Sathish,

Please refer my article on Angular CRUD 

https://www.c-sharpcorner.com/article/angular-crud-using-net-core-web-api/

Code to make an API call in Angular

1. First, import the HttpClientModule module in your Angular module. This module provides the HttpClient service, which you'll use to make the API call.

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

@NgModule({
  imports: [
    HttpClientModule
  ],
  // ...
})
export class AppModule { }

2. Next, create a service to handle the API call. In this example, we'll create a MyService service with a getDetails method that makes an API call to retrieve some data.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MyService {

  private apiUrl = 'https://my-api-url.com/details';

  constructor(private http: HttpClient) { }

  getDetails(): Observable {
    return this.http.get(this.apiUrl);
  }
}

This service injects the HttpClient service and defines an apiUrl property that contains the URL of the API you want to call. The getDetails method makes a GET request to the API and returns an Observable that emits the data returned by the API.3. You can call the getDetails method from a component or another service to retrieve the data.
 

 import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-my-component',
  template: `
    

      
{{detail.name}} - {{detail.value}}
    
  `
})
export class MyComponent {

  details: any[];

  constructor(private myService: MyService) { }

  ngOnInit() {
    this.myService.getDetails().subscribe(details => {
      this.details = details;
    });
  }
}

In this example, we inject the MyService service into the MyComponent component and call its getDetails method in the ngOnInit lifecycle hook. When the API call returns data, we set the details property of the component to the returned data and use an ngFor directive to display it in a list. This is just a basic example to get you started. 

Refer this step by step article, easy to understand and detailed explanation:

https://www.c-sharpcorner.com/article/crud-operation-in-angular-7-using-web-api/

follow this article

https://medium.com/codex/angular-crud-with-net-core-web-api-ad24a6f7ee3c

https://www.positronx.io/build-angular-crud-application-with-nodejs-and-express-rest-api/

Hello Sathish,

Refere below links:

https://www.itsolutionstuff.com/post/angular-get-data-from-api-and-display-exampleexample.html

https://levelup.gitconnected.com/angular-tutorial-part-ii-application-8c30566e7c5d

Thanks

Naimish Makwana