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
