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>
I did everything you said, imported the class and created a function within the component. I’m having difficulty with the syntax to call it. I’ll put the whole code down.
– lucas Emanuel