Angular 10 HttpClient Service Tutorial with Example

October 6, 2020 XpertPhp

In this article, we will know you about Angular 10 HttpClient Service. we will give you a simple example of an Angular 10 HttpClient Service. so you can easily know about the HttpClient Service.

The HttpClient Service used to send API requests to another server. so we are used to sending data and get data from the server. in this example, we are getting all student data by using HttpClient Service. so you can see our following example.

Create new angular app

We will create a new angular app using the following command.

ng new myNewApp
cd myNewApp

1 2	ng new myNewApp cd myNewApp

when you create your application at that time Angular CLI asks you Would you like to add Angular routing? (y/N). If you enter with y for Yes. then the angular router will be automatically configured.

Creating angular app services

now, we will create the student app services using the following command. it is used to get the data from the backend by calling rest API. it is used to get the data from the backend by calling rest API. so we need to rest API and you can use any type of created rest API.

ng generate service student/student

1	ng generate service student/student

src/app/student/student.service.ts

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';

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

  constructor(private httpClient: HttpClient) { }
  baseUrl: string = 'http://localhost/codeigniter4_rest_api/student';

  
  getStudents(){
    return this.httpClient.get(this.baseUrl);
  }
}

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

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

@Injectable({

providedIn: 'root'

})

export class StudentService {

constructor(private httpClient: HttpClient) { }

baseUrl: string = 'http://localhost/codeigniter4_rest_api/student';

getStudents(){

return this.httpClient.get(this.baseUrl);

}

Use service in component angular

src/app/app.component.ts

import { Component } from '@angular/core';
import { StudentService } from './student/student.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'myNewApp';
  
   students: Student[];

  constructor(private studentService: StudentService) { }

  ngOnInit(): void {
    this.studentService.getStudents()
      .subscribe( data => {
        this.students = data.result;
      });
  }
}

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

import { StudentService } from './student/student.service';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'myNewApp';

students: Student[];

constructor(private studentService: StudentService) { }

ngOnInit(): void {

this.studentService.getStudents()

.subscribe( data => {

this.students = data.result;

});

}

src/app/app.component.html

<div class="col-md-6 container">
<table class="table table-striped">
    <thead>
    <tr>
      <th>Id</th>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Address</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let student of students">
      <td>{{ student.id }}</td>
      <td>{{ student.first_name }}</td>
      <td>{{ student.last_name }}</td>
      <td>{{ student.address }}</td>
    </tr>
    </tbody>
  </table>
</div>

<thead>

<tr>

<th>FirstName</th>

<th>LastName</th>

<th>Address</th>

</tr>

</thead>

<tbody>

<td>{{ student.id }}</td>

<td>{{ student.first_name }}</td>

<td>{{ student.last_name }}</td>

<td>{{ student.address }}</td>

</tr>

</tbody>

</table>

</div>

Angular 10 App Module

finally, we will import the module in this file. so you can see the below example.
src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; 

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

import { BrowserModule } from '@angular/platform-browser';

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

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

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

HttpClientModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Run Angular Application

Now we will run our Angular application using the below command.

ng serve

ng serve

Please follow and like us:

Create new angular app

Creating angular app services

Use service in component angular

Angular 10 App Module

Run Angular Application

Related posts: