I'm working on an angular project. I'm using ng2-smart-table
as a table in my project. I already connect to google cloud firestore
and now I can add and retrieve data with firestore. I want to make an option for deleteing the rows.
How can I do it?
I added the above mentioned table into manufacture component.
manufacture.component.ts
import { Component, OnInit } from '@angular/core';
import { ManufactureService } from './manufacture.service';
import { Manufacture } from './manufacture.model';
@Component({
selector: 'ngx-manufacture',
styles: [],
template: `
<ng2-smart-table
(createConfirm)="addData($event)"
(deleteConfirm)="deleteData($event)"
[settings]="settings"
[source]="manu"
>
</ng2-smart-table>
`
})
export class ManufactureComponent implements OnInit {
manu: Manufacture[] = [];
constructor(private service: ManufactureService) {}
ngOnInit() {
alert(this.service.show());
this.service.getManufacture().subscribe(arr => {
let manu_list = arr.payload.get('manufact');
if (manu_list) {
this.manu = manu_list;
}
});
}
settings = {
add: {
addButtonContent: '<i class="nb-plus"></i>',
createButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>',
confirmCreate: true
},
edit: {
editButtonContent: '<i class="nb-edit"></i>',
saveButtonContent: '<i class="nb-checkmark"></i>',
cancelButtonContent: '<i class="nb-close"></i>'
},
delete: {
deleteButtonContent: '<i class="nb-trash"></i>',
confirmDelete: true
},
columns: {
shopname: {
title: 'Shop Name'
},
ownername: {
title: 'Owner Name'
},
nic: {
title: 'NIC'
},
contactno: {
title: 'ContactNo'
},
address: {
title: 'Address'
},
email: {
title: 'Email'
}
}
};
addData(data) {
this.manu.push(data.newData);
console.log(this.manu);
this.service.addManufacture({ manufact: this.manu }).subscribe(next => {
data.confirm.reject();
});
}
deleteData(data) {
this.service.deleteManufacture();
}
}
I can delete a whole document, but I only want to delete a particular single row.
deleteSpecificRow(event) {
this.service.deleteTheRow(event.data.id);
}
I think you had already implemented a service (deleteTheRow) that delete a single row using id, i hope this will help!
deleteTheRow() function :
deleteTheRow(id) {return
this.firestore
.collection("yourCollection")
.manu(id)
.delete();}
- I guess you should take a look that at this : https://itnext.io/how-to-crud-in-angular-firebase-firestore-456353d7c62