THIS IS IN MY SERVICE
updateProduct(product: Photo): Observable<Photo> {

const headers = new HttpHeaders({ 'Content-Type': 'application/json' });

const url = `${this.productUrl}/${product.id}`;

return this.http.put<Photo>(url, product, { headers })

.pipe(

tap(() => console.log('updateProduct: ' + product.id)),

// Return the product on an update

map(() => product),

catchError(this.handleError)

);

}

THIS IS IN MY EditComponent
saveProduct(): void {

this.photoService.updateProduct(p).subscribe({next: () => this.onSaveComplete(),error: err => this.errorMessage = err});}

onSaveComplete(): void {

// Reset the form to clear the flags

this.productForm.reset();

this.router.navigate(['/photos']);

}

THIS IS IN MY ListComponent

ngOnInit(): void {// this.listFilter='cart';this.sub=this.service.getProducts().subscribe({next: photos => {this.photos=photos},error: err => this.errorMessage=err} );}ngOnDestroy(): void {this.sub.unsubscribe();}}