Cancellazione dei record

L'ultima funzionalità che dovremo implementare nella nostra applicazione è la cancellazione del record, ma tale operazione sarà poco più di una formalità. Come sempre andiamo a creare tramite CLI il component che si occuperà dell'operazione:

[code]ng g component prodotti/delete-product[/code]

Lo aggiungiamo al file app.module sia negli import che nelle declarations:

import { DeleteProductComponent } from './products/delete-product/delete-product.component';
@NgModule({
  declarations: [
    ..
    DeleteProductComponent,
  ],

Andiamo a mappare la rotta nel modulo:

import {DeleteProductComponent} from './products/delete-product/delete-product.component';
const routes:Routes=[
..
    {path:'delete/:id', component:DeleteProductComponent},
Come già visto precedentemente per la modifica, il link all'eliminazione del record si trova nella lista dei prodotti:
[code lang=javascript]<a [routerLink]="['/delete',product.id]" class='btn btn-danger'>
            <span class='glyphicon glyphicon-remove'></span> Delete
          </a>

Procediamo con la creazione del nostro component che rispetto a quello della modifica sarà decisamente più semplice. Partiamo dai moduli da importare:

import { Component } from '@angular/core';
import { Router, ActivatedRoute} from '@angular/router';
import { ProductService } from '../../product.service';

Continuiamo con il decoratore:

@Component({
    selector: 'app-delete-product',
    templateUrl: './delete-product.component.html',
    styleUrls: ['./delete-product.component.css'],
    providers: [ProductService]
})

Nella class aggiungiamo la proprietà relativa all'id del prodotto da eliminare che valorizzeremo con il modulo ActivatedRoute:

product_id:number;

Procediamo con il costruttore:

constructor(private productService: ProductService, private route:ActivatedRoute, private router:Router){}

E quindi valorizziamo all'OnInit la proprietà product_id

ngOnInit(){
        this.route.params.subscribe(params => {
            this.product_id=params['id'];
        });
    }

Il template sarà essenziale. Avremo una pagina dove verrà chiesta conferma, il pulsante non riporta alla lista dei prodotti mentre sul pulsante si è mappata la funzione che cancellerà il record:

[code]<section>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body text-align-center">Sei sicuro?</div>
<div class="panel-footer clearfix">
<div class="text-align-center">
<button (click)="deleteProduct()" class="btn btn-danger">
<span class="glyphicon glyphicon-ok-sign"></span> Si
</button>
<a routerLink="/home" class="btn btn-primary">
<span class="glyphicon glyphicon-remove-sign"></span> No
</a>
</div>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</section>[/code]

Prima di implementare la funzione deleteProduct() creiamo il metodo nel service:

deleteProduct(product_id){
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this._http.delete(
            "http://localhost/phprest/api/v1/prodotti/"+product_id,
            options
        ).map(res => res.json());
    }

Le novità rispetto a quanto già visto in precedenza sono sostanzialmente due: la prima è che il parametro d'ingresso è un semplice numero ovvero l'id del record da cancellare, la seconda il metodo delete per effettuare la chiamata.

Non resta che creare il metodo nel component:

deleteProduct(){
    this.productService.deleteProduct(this.product_id)
        .subscribe(
            product => {
                this.router.navigateByUrl('/home');
            }
        );
    }

Effettuiamo la chiamata al service e tramite questa al backend al click sul pulsante, ottenuta la risposta dal server torniamo sulla lista dei prodotti. Con quest'ultimo passaggio la nostra applicazione CRUD con frontend Angular e backend PHP è completa.

Descrizione: Cancellazione dei record in un'applicazione basata su PHP e Angular.
Riassunto: Concludiamo la creazione della nostra applicazione basata su PHP e Angular sviluppando la parte relativa alla cancellazione dei record.