How to delete with Angular 4

Question

I created a class to delete data from a database but I don’t know what I call the same class by Angular 4 in the html code.

//Classe Delete
deleteClient(client): void {
    if(this.client.id){
        this.clientService.deleteClient(client).then(msg => this.returnMsg = msg);
    }else{

    }
}

html

<td>
   <button (click)='deleteClient()'>Delete</button>
   <button>
      <a [routerLink]="['/detail', client.id]">
        Details
      </a> 
   </button>
</td>

Answer 1

You do not call it in HTML. you need to assign a function in the (click) of your button,.

And then no. js of your component, you need to import your delete class, create a function within your component (the same one you assigned in your HTML), and within that function call the method of your class.

Answer 2

I put the code of the Component that I created and the view to make it easier to understand. In the case of the html view I created a table with client registration data and a button to delete them, where the button would delete according to the client id. My doubt is with respect to syntax, I have looked in various documentations and I did not get the answer.

//Codigo do componte.ts que esta sendo usado
import { Component, OnInit, Input } from '@angular/core';
import {ClientService} from '../services/client.service';
import { Client } from '../client-register/client';
import { Message } from '../client-register/message';

@Component({
  selector: 'app-client-list',
  templateUrl: './client-list.component.html',
  styleUrls: ['./client-list.component.css']
})

export class ClientListComponent implements OnInit {

  clients: Client[] = [];
  @Input() client: Client = new Client();
  returnMsg: Message;



  constructor(
    private clientService: ClientService
  ) {}

  ngOnInit(): void {
    this.clientService.getClients().then(clients => this.clients = clients);
  }

  deleteClient(client): void {
    if(this.client.id){
        this.clientService.deleteClient(client)
        .then(msg => this.returnMsg = msg);
    }else{

    }
 }

}

//Codigo Html da pagina
<h2>ACME - CLIENTS LIST</h2>
<div class="container">
  <div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>User Name</th>
          <th>Birth Date</th>

        </tr>
      </thead>
      <tbody *ngFor="let client of clients">
        <tr>
          <td>
            {{client.name}}
          </td>
          <td>
            {{client.userName}}
          </td>
          <td>
            {{client.birthDate}}
          </td>
          <td>

          </td>
          <td>

            <button>
              <button (click)='deleteClient(client)'>Delete</button>
              <a [routerLink]="['/detail', client.id]">
                Details
              </a> 
            </button>

          </td>
        </tr>
      </tbody>
    </table>


  </div>


</div>

Answer 3

You could declare a variable

http:Http

And then use a post or http

 deleteClient(idcliente){
   this.http.get("url:porta&idcliente="idcliente)
    .subscribe(result => {
       console.log(result.json())
    });
   }