I have recently added an edit button to my product list, but when I click on it, the form page opens with no data populated. Upon debugging in my product.service.ts file, I noticed that it outputs null when using console.log(p). I believe this is where the main issue lies.
[I am quite new to Angular, so any assistance would be greatly appreciated].
Here is a snippet of my product form template-
<div class ="row">
<div class="col-md-6">
<div class="card" style="width: 30rem;">
<img [src]= "product.imageUrl" class="card-img-top" *ngIf= "product.imageUrl">
<div class="card-body">
<h5 class="card-title"> {{ product.title }}</h5>
<p class="card-text"> {{ product.description }} </p>
</div>
</div>
</div>
<div class="col-md-6">
<form #f="ngForm" (ngSubmit)="save(f.value)">
[The rest of the form code goes here]
</form>
</div>
</div>
Product-form.component.ts
import { Component } from '@angular/core';
[Remaining imports and logic for Product Form component]
}
Lastly My product service implementation can be seen below- (product.service.ts) -
import { Injectable } from '@angular/core';
[Code for ProductService with create, getAll, and get methods]
}
The exported firebase data.json file contains information about categories and products. Click here to view it.
Page view before clicking edit:
(Image link before edit)
Page view after clicking edit:
(Image link after edit)