Delete Item In Angular 2

Question

How will be able to delete item in Angular 2+? I am new to Angular and I'm confused a little bit about this. Hope you guys can help. I just did the add item by the way but i don't know how to delete an item. I am using three files here below. 1. cribs.service.ts, 2. crib-card-components.ts and 3. crib-card-component.html.

//cribs.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Subject } from 'rxjs/Subject'
import 'rxjs/add/operator/map';

@Injectable()
export class CribsService {

  public newCribSubject = new Subject<any>();

  constructor(private http: Http) { }

  getAllCribs() {
    return this.http.get('data/cribs.json').map(res => res.json())
  }

  addCrib(data){
      data.image = 'default-crib';
      this.newCribSubject.next(data);
  }
}

//crib-card-component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Crib } from './../crib';

@Component({
  selector: 'app-crib-card',
  templateUrl: './crib-card.component.html',
  styleUrls: ['./crib-card.component.css']
})
export class CribCardComponent implements OnInit {

  @Input('crib') crib: Crib;

  constructor() { }

  ngOnInit() {

  }

}

//crib-card.component.html

<div class="thumbnail">
<img src="assets/images/{{ crib.image }}.jpg" alt=""> 

<div class="caption">
   <div *ngIf="!crib.showDetails">
      <h4>
        <span class="label label-primary">
           {{ crib.type }}
        </span>
      </h4>
      <h3>
        <i class="glyphicon glyphicon-tag"></i>
        {{ crib.price | currency: 'USD':true }}
      </h3>
      <h4>
        <i class="glyphicon glyphicon-home"></i>
        {{ crib.address }}
      </h4>

      <hr>

      <button
        class="btn btn-sm btn-success"
        *ngIf="!crib.showDetails"
        (click)="crib.showDetails = !crib.showDetails">
        Details
      </button>

      <button
        class="btn btn-sm btn-danger"
        (click)="removeItem(crib)">
        Delete
      </button>
    </div>

    <div *ngIf="crib.showDetails">
       <div class="details">
          <h4>
            <span class="label label-primary">
               Beds: {{ crib.bedrooms }}
            </span>
            <span class="label label-primary">
               Baths: {{ crib.bathrooms }}
            </span>
            <span class="label label-primary">
               SqFt: {{ crib.area }}
            </span>
          </h4>

          <p>{{ crib.description }}</p>

          <hr>

          <button
            class="btn btn-sm btn-danger"
            (click)="crib.showDetails = !crib.showDetails">
            Close
          </button>
        </div>
      </div>
   </div>
</div>

score 0 · Answer 1 · answered Aug 10 '17 at 12:11

0

Did you try like this?

//crib-card-component.ts

    confirmdeleteitem(deleteitemdata) {     

          this._Service.deleteitem(deleteitemdata).subscribe(data => {
                let status = data.status;            
          });
    }

//cribs.service.ts

     deleteitem(ParamsValue:any) {

            let headers = new Headers();
            headers.append('Content-Type', 'application/x-www-form-urlencoded');
            headers.append('Access-Control-Allow-Methods', 'GET,PUT,POST,OPTIONS');
            headers.append('Access-Control-Allow-Origin', '*');
            var params = ParamsValue;

            return this.http.post(APIURL, params, {
                headers: headers
            }).map(this.extractData);       
    }

   private extractData(res: Response) {
        let Response = res.json();
        return Response || {};
    }

answered Aug 10 '17 at 12:11

Vel

9,027
6
34
66

you want to delete from this file `data/cribs.json`? – Vel Aug 10 '17 at 12:38
Can i have your email? will send it to you – Joseph Aug 10 '17 at 12:40
you can remove it now. – Joseph Aug 10 '17 at 12:43
I don't have backend. I just have a json file. Then i have add button where you can add an item. Hold on, i'm still putting in a rar – Joseph Aug 10 '17 at 12:45
Please check your email – Joseph Aug 10 '17 at 13:02

score 0 · Answer 2 · answered Aug 10 '17 at 12:33

What are you doing there is just to emit the values that you get from the service, and not store them, meaning that once it is emitted => renders

Usually, the way to do it is emitted => stored => renders

So what I would do.

1st store In my page component

cribList: Array<Crib> = getAllCribs().flatMap((cribs: Array<Crib>) => cribs)

//SO here we wait to getAllCribs() and then we store the incoming cribs to the list.

2nd render: we may iterate through CribList and Render a component for each crib.

<div class="crib-list">
  <app-crib-item *ngFor="let crib of cribList" [crib]="crib"></app-crib-item>
</div>

SO far so good.

3rd add a delete event WHile we want to delete a Crib only Local and not on the server The Page-component (has the crib list) may create a method to handle, click event on a delete button. e.x

    <div class="crib-list">
      <app-crib-item (click)="removeCrib(crib)" *ngFor="let crib of cribList" [crib]="crib"></app-crib-item>
    </div>

4th handle the remove event // On PageComponent

removeCrib(crib: Crib) {
  this.cribList.filter(item => item.id != crib.id) //assuming that id exists on Crib Model
}

Delete Item In Angular 2

2 Answers2