I am trying to delete the clicked td using the anguler but it dosent work, dosent return any thing, just it get the data Could any one help and tell me where my mistake, i am new with useing anguler. thanks here is component.ts
import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http'
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
dataArray;
id;
constructor( private http:HttpClient) {
this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(
data =>{
this.dataArray = data
}
)
}
ngOnInit(): void {
this.delete
}
delete () {
this.http.delete('https://jsonplaceholder.typicode.com/posts/${id}')
.subscribe(() => this.id = 'Delete successful');
console.log(this.dataArray)
}
}
here is my table :
<div class="table-list">
<table class="table">
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Operations</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataArray;" index as i>
<td>{{item.title}}</td>
<td> <i class="fal fa-check-circle px-2"></i> <i class="fal fa-edit px-2"></i> <button><i class="fal fa-trash-alt" (click)="delete()"></i></button> </td>
</tr>
</tbody>
</table>
You have to pass a parameter to your delete function :
delete (id: number) {
this.http.delete('https://jsonplaceholder.typicode.com/posts/' + id)
.subscribe(() => this.id = 'Delete successful');
console.log(this.dataArray)
}
On your html add (click)="delete(item.id)
Then to remove the data from the array you have to run :
this.array = this.array.filter((d) => d.id !== id));