How to work on CRUD operations (create,read,update,delete) using HTTP fake api in Angular 6/7 ??

  Angular

HTTP Services

Most front-end applications communicate with backend services over the HTTP protocol. Modern browsers support two different APIs for making HTTP requests: the XMLHttpRequest interface and the fetch() API.

The HttpClient in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. Additional benefits of HttpClientinclude testability features, typed request and response objects, request and response interception, Observable apis, and streamlined error handling.

Codeerror – CRUD

Set Up Project

Before you can use the HttpClient, you need to import the Angular HttpClientModule. Most apps do so in the root AppModule.

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

@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
HttpClientModule

],
providers: [],
bootstrap: [AppComponent]})
export class AppModule { }

Having imported HttpClientModule into the AppModule, you can inject the HttpClient into an application class as shown in the following ConfigService example.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CrudService {

constructor(private http:HttpClient) { }

}

Once you Completed this Process let’s Create your Form Structure And Design. here we created simple Input Element And lists for Get Display Posts.

Component.html file

<input 
(keyup.enter)="createPost(title)" #title
type="text" class="form-control">
<ul class="list-group">
<li
*ngFor="let post of posts"
class="list-group-item">
<button
(click)="deletePost(post)"
class="btn btn-default btn-sm">Delete</button>
<button
(click)="updatePost(post)"
class="btn btn-primary btn-sm">Update</button>
{{ post.title }}
</li>
</ul>


Component.ts file


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

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

constructor(private service: PostService) {
}

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

createPost(input: HTMLInputElement) {
let post = { title: input.value };
input.value = '';

this.service.create(post)
.subscribe(
newPost => {
post['id'] = newPost.id;
this.posts.splice(0, 0, post);
},

}

updatePost(post) {
this.service.update(post)
.subscribe(
updatedPost => {
console.log(updatedPost);
});
}

deletePost(post) {
this.service.delete(post.id)
.subscribe(
() => {
let index = this.posts.indexOf(post);
this.posts.splice(index, 1);
}

}
}

After Create a service using Angular Cli

ng generate service ServiceName (or) ng g s ServiceName

Service File


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


@Injectable()
export class DataService {
constructor(private url: string, private http: HttpClient) { }

getAll() {
return this.http.get(this.url)
.map(response => response.json())

}

create(resource) {
return this.http.post(this.url, JSON.stringify(resource))
.map(response => response.json())

}

update(resource) {
return this.http.patch(this.url + '/' + resource.id, JSON.stringify({ isRead: true }))
.map(response => response.json())

}

delete(id) {
return this.http.delete(this.url + '/' + id)
.map(response => response.json())

}


}

Once you Setup this all run the project and Check…Update Post method Still not Completed . we will update as much as possible. Are you Getting errors or doubts comment below….

Spread the Code

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of