Angular 14 HttpClient & Http Services Example

Angular 14 http service example; Through this tutorial, you will learn how to create httpClient and http services in angular 14 apps.

Angular 14 HttpClient & Http Services Example

use the following steps to implement httpclient and http services in angular 14 apps; as follows:

• Step 1: Create New App
• Step 2: Import HttpClientModule
• Step 3: Create Service for API
• Step 4: Use Service to Component
• Step 5: Updated View File
• Step 6: Run Angular App

Step 1: Create New App

Execute the following command on terminal to create new angular app; as follows:

ng new my-new-app

Step 2: Import HttpClientModule

Import HttpClientModule to app.module.ts file. so visit src/app directory and open app.module.ts file and import modules into it; as follows:

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

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

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

Step 3: Create Service for API

Execute the following command on the terminal to create service; as follows:

ng g s services/post

Then visit src/app/services/ directory and oen post.service.ts file; and add the following code into it:

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

@Injectable({
  providedIn: 'root'
})
export class PostService {
  private url = 'http://jsonplaceholder.typicode.com/posts';

  constructor(private httpClient: HttpClient) { }

  getPosts(){
    return this.httpClient.get(this.url);
  }

}

Step 4: Use Service to Component

Visit the src/app/ directory and open app.component.ts; and add the following code into it; as follows:

import { Component, OnInit } from '@angular/core';
import { PostService } from './services/post.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  posts:any;

  constructor(private service:PostService) {}

  ngOnInit() {
      this.service.getPosts()
        .subscribe(response => {
          this.posts = response;
        });
  }
}

Step 5: Updated View File

Visit the src/app/ directory and open app.component.html. And then add the following code; as follows:

<h1>Angular 14 HttpClient for Sending Http Request Example - Tutsmake.com</h1>

<ul class="list-group">
  <li
      *ngFor="let post of posts"
      class="list-group-item">
      {{ post.title }}
  </li>
</ul>

Step 6: Run Angular App

Execute the following command on the terminal to start angular app; as follows:

ng serve

Recommended Angular Tutorials