Olá pessoal, o artigo de hoje será bem curto, vamos deletar um item da nossa lista usando o método HTTP.

Primeiro vamos no nosso “SERVICO.TS”, e adicionar o seguinte código.

//DELETE EXCLUIR DADOS DA API
  delete(id: any) {
    return this.http.delete<any>(`http://localhost:3000/produtos/${id}`)
  }

Agora no nosso “COMPONENT.TS” criaremos nossa função de deletar.

 //DELETE
  deletar(id: any) {
    this.serviceCrud.delete(id).subscribe(() => {
      this.getLista();
    });
  }

Agora é só chamar a função deletar no nosso component.html, passando o id dos itens.

<tr *ngFor="let items of lista">
        <td>{{items.nome}}</td>
        <td>{{items.descricao}}</td>
        <td>
          <button class="btn btn-warning" (click)="editar(items)">Editar</button>
          {{''}}
          <button class="btn btn-danger" (click)="deletar(items.id)">Deletar</button>
        </td>

E assim vai ficar o nosso delete.

Por fim nosso crud está concluído. Repositório do projeto no meu GIT HUB: https://github.com/Alefbacelar/Project-crud-Angular.

Alef Bacelar