I am facing an issue with my Angular code. I want to be able to delete a record and have it reflect in real-time. When I create a product, it works fine, but deleting the product doesn't work unless I refresh the browser. I'm not sure where the problem in the code might be.
My suspicion is that the issue lies in the getProducts(): Promise method. Whenever I click on Delete, it creates a new product, and the deletion only happens after I refresh the browser.
Your assistance would be greatly appreciated. Thank you.
My data.service.ts
import { Injectable } from '@angular/core';
import { Producto } from '../interfaces/producto';
import { AngularFirestore } from '@angular/fire/firestore';
import { NgxSpinnerService } from "ngx-spinner";
import Swal from 'sweetalert2';
@Injectable({
providedIn: 'root'
})
export class DataService {
private colProduct: string = 'Products';
private products: Producto[] = [];
constructor(private _firestore: AngularFirestore, private _spinner: NgxSpinnerService) {
}
showSpinner(): void {
this._spinner.show();
}
hideSpinner(): void {
this._spinner.hide();
}
showAlert(icon: any, title: string, text: string, showConfirmButton: boolean, position: any, timer: number) {
Swal.fire({
icon: icon,
title: title,
text: text,
showConfirmButton: showConfirmButton,
position: position,
timer: timer
})
}
updateProduct(data: any, id: string) {
}
deleteProduct(id: string): Promise<any> {
return this._firestore.collection(this.colProduct).doc(id).delete();
}
createProduct(producto: Producto): Promise<any> {
return this._firestore.collection(this.colProduct).add(producto);
}
getProducts(): Promise<any> {
return new Promise(resolve => {
this._firestore.collection(this.colProduct).stateChanges().subscribe(collection => {
collection.forEach((document) => {
const data:any = document.payload.doc.data();
data.id = document.payload.doc.id;
this.products.push(data);
});
resolve(this.products);
});
});
}
}
my components.ts
import { Component, OnInit } from '@angular/core';
import { Producto } from '../shared/interfaces/producto';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { DataService } from '../shared/services/data.service';
@Component({
selector: 'app-catalogo',
templateUrl: './catalogo.component.html',
styleUrls: ['./catalogo.component.scss']
})
export class CatalogoComponent implements OnInit {
public form: FormGroup;
public productos: Producto[] = [];
constructor(private _data: DataService) { }
ngOnInit(): void {
this._data.getProducts().then((data: Producto[]) => {
this.productos = data;
});
this.form = new FormGroup({
title: new FormControl('', Validators.required),
pricing: new FormControl('', Validators.required),
description: new FormControl('', Validators.required)
});
}
public saveForm(): void {
this._data.showSpinner();
if (this.form.valid) {
const { title, description , pricing } = this.form.value;
const newProduct: Producto = {
title: title,
description: description,
pricing: pricing,
image: "https://celadasa.vteximg.com.br/arquivos/ids/156984-1000-1000/BQ7032-001.jpg",
category: 'calzado',
creationDate: new Date()
}
this._data.createProduct(newProduct).then(() => {
this.form.reset();
this._data.hideSpinner();
this._data.showAlert('success', 'product', 'ok', false, 'center', 3500);
});
} else {
this._data.hideSpinner();
this._data.showAlert('error', 'form invalid', 'validad', false, 'center', 3500);
}
}
delete(id) {
this._data.showSpinner();
this._data.deleteProduct(id).then(() => {
this.form.reset();
this._data.hideSpinner();
this._data.showAlert('success', 'product delete', 'delete', false, 'center', 3500);
});
}
}
I am unsure whether the issue lies within the getProducts() function or elsewhere, or if I need to use pipes and maps.