call http rest service from angular

In this tutorial, we will learn to call http rest service from angular

To understand this tutorial we should know the angular basics like components, service

Before starting we should have a component & service knowledge, Here we are going to use appcomponent as component and going to create a service to call http service

Navigate to src/app from vs code terminal, Execute below command to create service

ng g s app-service

app-service.service.ts & app-service.service.spec.ts will get created in src/app folder

C:\Users\Admin\angular-demo\src\app>ng g s app-service
CREATE src/app/app-service.service.spec.ts (378 bytes)
CREATE src/app/app-service.service.ts (139 bytes)

C:\Users\Admin\angular-demo\src\app>

Now open the app-service.ts file

import { Injectable } from '@angular/core';

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

  constructor() { }
}

Http Endpoint details

For this tutorial, I have created a endpoint which return student details

http://localhost:8080/api/student

Output Json

[
  {
    "id": 1,
    "department": "ECE",
    "firstname": "rajesh",
    "lastname": "kumar"
  }
]

Create a student model class to map the HTTP Response

student.model.ts

export class Student {
    department: string;
    firstname: string;
    id: number;
    lastname: string;
}

create a method to invoke http call. We are using HttpClient from @angular/common/http

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


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

  constructor(private http: HttpClient) { }

  getStudentDetails(): Observable<Student[]>{
    return this.http.get<Student[]>('http://localhost:8080/api/student');

  }

}

Now call the getStudentDetails() method from app.component.ts on ngOnInit

  ngOnInit(): void {
    this.appService.getStudentDetails().subscribe(data => {
      this.studentDetails=data;
    });

Below is the complete app.component.ts

import { Component } from '@angular/core';
import { AppServiceService } from './app-service.service';
import { Student } from './model/student.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  title = 'angular-demo';

  constructor(private appService: AppServiceService) { }

   studentDetails: Student[];

  ngOnInit(): void {
    this.appService.getStudentDetails().subscribe(data => {
      this.studentDetails=data;
    });

  }
}

You can map this StudentDetails to your html as like below

<div *ngIf="studentDetails">
    <table>
        <thead>
            <tr>
                <td>ID</td>
                <td>FirstName</td>
                <td>LastName</td>
                <td>Department</td>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let response of studentDetails">
                <td>
                    {{response.id}}
                </td>
                <td>
                    {{response.department}}
                </td>
                <td>
                    {{response.firstname}}
                </td>
                <td>
                    {{response.lastname}}
                </td>
            </tr>

        </tbody>

    </table>

</div>
<router-outlet></router-outlet>

Conclusion

I this post we learned to call http rest service from angular

Github

https://github.com/rkumar9090/angular-demo/blob/master/src/app/app-service.service.ts