How to do a delete with Angular 4

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())
    });
   }

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

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

I put the component code I created and the view to make it easier to understand. In the case of the view in html I created a table with the data of register of the clients and a button to delete them, where the button would delete according to the id of the client. My question is about syntax, I've looked in several documentation 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>