Angular 11 Http Get Example Tutorial

In this article, we will know you about the Angular 11 Http Get Example(angular httpclient 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 11 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 11 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