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

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *