JS
Angular JS
Angular 14 RxJS Observable With Httpclient Example
We will discuss angular 14 observable example. I would like to share with you angular 14 rxjs observable example. if you have question about angular 14 http observable example then I will give simple example with solution. This article goes in detailed on angular 14 observable with httpclient example. Alright, let’s dive into the steps.
- TAGS
- Angular
- Angular 14
- 4.5/5.0
- Last updated 08 September, 2022
- By Admin
If you don't know how to use observable with httpclient request in an angular application then I will help you get done. we always prefer to use observable for http requests that helps to manage server requests and monitor server requests. observable is provided by rxjs.
Here, I will give you a very simple example with http request with observable in angular. we will use jsonplaceholder API to make API requests. so let's follow some steps to get the example done, I also attach a preview at the bottom.
Step 1: Create New App
You can easily create your angular app using bellow command:
ng new my-new-app
Step 2: Import HttpClientModule
In this step, we need to import HttpClientModule to app.module.ts file. so let's import it as like bellow:
src/app/app.module.ts
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 Post Class
In this step, we will simply create Post class and define data types of returning data. so let's create post.ts file and put bellow code:
src/app/post.ts
export class Post { constructor( public body: string, public id: number, public title: string, public userId: number ) {} }
Step 4: Create Service for Call API
Here, we need to create service for http client request. we will create service file and write client http request using observable code. this service will use in our component file. So let's create service and put bellow code:
ng g s post
src/app/post.service.ts
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { Post } from './post'; @Injectable({ providedIn: 'root' }) export class PostService { private url: string = 'https://jsonplaceholder.typicode.com/posts'; constructor(private httpClient: HttpClient) { } public getPosts(): Observable { return this.httpClient.get (this.url); } }
Step 5: Use Service to Component
Now we have to use this services to our app component. So let's updated code as like bellow:
src/app/app.component.ts
import { Component, OnInit } from '@angular/core'; import { PostService } from './post.service'; import { Post } from './post'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { name = 'Angular'; posts = new Array (); constructor(private service:PostService) {} ngOnInit() { this.service.getPosts().subscribe(response => { this.posts = response.map(item => { return new Post( item.body, item.id, item.title, item.userId ); }); }); } }
Step 6: Updated View File
Now here, we will updated our html file. let's put bellow code:
I used bootstrap class on this form.
src/app/app.component.html
Angular 14 Observables HttpClient Example - codewale.com
ID Body Title UserID {{ post.id }} {{ post.body }} {{ post.title }} {{ post.userId }}
Run Angular App
All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:
ng serve
Now, Go to your web browser, type the given URL and view the app output.
http://localhost:4200
I hope it can help you...