Angular 10 Http Get Example Tutorial

October 6, 2020 XpertPhp

In this article, we will know you about the Angular 10 Http Get Example. We will give you a simple example of front-end applications that connect to back-end services through the HTTP protocol. so here we will use the HttpClient API provided by Angular CLI.

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 Angular 10 Http Get Example Tutorial.

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 the 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: