angular - Add/update/delete products in json file using angular2 with http and observables -

how can add/update/delete products/items in json file using angular2 http , observables. below code, products working fine. please advise others

product-list.component

export class productlistcomponent implements oninit { pagetitle: string = 'product list'; imagewidth: number = 50; imagemargin: number = 2; showimage: boolean = false; listfilter: string; errormessage: string;  products: iproduct[];  constructor(private _productservice: productservice) {  }  toggleimage(): void {     this.showimage = !this.showimage; }  deleteitem() : void {     this._productservice.deleteproduct(); } ngoninit(): void {     this._productservice.getproducts()             .subscribe(products => this.products = products,                        error => this.errormessage = <any>error); } 

product.service.ts

export class productservice { private _producturl = 'api/products/products.json'; private headers = new headers({'content-type': 'application/json'});  constructor(private _http: http) { }  getproducts(): observable<iproduct[]> {     return this._http.get(this._producturl)         .map((response: response) => <iproduct[]> response.json())         .do(data => console.log('all: ' +  json.stringify(data)))         .catch(this.handleerror); }  deleteproduct(): observable<iproduct[]> {     let id : number = 1;             return this._http.delete(`${this._producturl}/${id}`)                       .map((res:response) => res.json())                       .catch((error:any) => observable.throw(error.json().error || 'server error'));  }    

product-list.component.html

<tbody>                 <tr *ngfor='let product of products | productfilter:listfilter'>                     <td>                         <img *ngif='showimage'                              [src]='product.imageurl'                              [title]='product.productname | uppercase'                              [style.width.px]='imagewidth'                               [style.margin.px]='imagemargin'>                     </td>                     <td><a [routerlink]="['/product', product.productid]">                         {{product.productname}}                         </a>                     </td>                     <td>{{ product.productcode | lowercase }}</td>                     <td>{{ product.releasedate }}</td>                     <td>{{ product.price | currency:'usd':true:'1.2-2' }}</td>                     <td>                         <ai-star [rating]='product.starrating'                                 (ratingclicked)='onratingclicked($event)'>                         </ai-star>                    </td>                    <td>                        <button class="delete"(click)="delete(product); $event.stoppropagation()">x</button>                    </td>                 </tr>             </tbody> 

json file

[ {     "productid": 1,     "productname": "leaf rake",     "productcode": "gdn-0011",     "releasedate": "march 19, 2017",     "description": "leaf rake 48-inch wooden handle.",     "price": 19.95,     "starrating": 3.2,     "imageurl": "http://openclipart.org/image/300px/svg_to_png/26215/anonymous_leaf_rake.png" }, {     "productid": 2,     "productname": "garden cart",     "productcode": "gdn-0023",     "releasedate": "march 18, 2017",     "description": "15 gallon capacity rolling garden cart",     "price": 32.99,     "starrating": 4.2,     "imageurl": "http://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png" }, {     "productid": 5,     "productname": "hammer",     "productcode": "tbx-0048",     "releasedate": "may 21, 2017",     "description": "curved claw steel hammer",     "price": 8.9,     "starrating": 4.8,     "imageurl": "http://openclipart.org/image/300px/svg_to_png/73/rejon_hammer.png" }, {     "productid": 8,     "productname": "saw",     "productcode": "tbx-0022",     "releasedate": "may 15, 2017",     "description": "15-inch steel blade hand saw",     "price": 11.55,     "starrating": 3.7,     "imageurl": "http://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png" }, {     "productid": 10,     "productname": "video game controller",     "productcode": "gmg-0042",     "releasedate": "october 15, 2017",     "description": "standard two-button video game controller",     "price": 35.95,     "starrating": 4.6,     "imageurl": "http://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png" } 

]

i replied question in discussion tab course. here answer:

you cannot add, update, or delete rows product.json file using http. works.

to add, update, , delete data http, need back-end server. there in memory back-end server can use try out add, update, , delete without having set back-end server.

for more information , sample code see: https://app.pluralsight.com/player?course=angular-2-reactive-forms&author=deborah-kurata&name=angular-2-reactive-forms-m8&clip=0&mode=live