I'm currently working with Angular version 13.2.6 and a .NET Core API.
I have two components, PaymentdetailsView (parent) and PaymentDetailsForm (child).
Within the PaymentDetailsForm component, there is a form that, when submitted, makes a call to the API to post data to the database.
In the PaymentDetailsView component, the data is then displayed in a table.
The issue I'm facing is that I'm unable to load the view component immediately after submitting the form. The two forms are positioned side by side, and my requirement is for the adjacent table to be populated with the updated data as soon as the form is submitted.
PaymentView.component.ts
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PaymentServicesService } from '../services/payment-services.service';
@Component({
selector: 'app-payment-view',
templateUrl: './payment-view.component.html',
styleUrls: ['./payment-view.component.css']
})
export class PaymentViewComponent implements OnInit {
constructor(public http: PaymentServicesService) { }
ngOnInit(): void
{
this.http.getResult();
}
getDetails()
{
// used just to check if idea is working
//on click of a button in form this method calls get request and fill the table
}
}
PaymentDetailsForm.component.ts
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';
import { PaymentServicesService } from '../../services/payment-services.service';
import { PaymentViewComponent } from '../payment-view.component';
@Component({
selector: 'app-paymentdetailsform',
templateUrl: './paymentdetailsform.component.html',
styleUrls: ['./paymentdetailsform.component.css']
})
export class PaymentdetailsformComponent implements OnInit {
constructor(private http: PaymentServicesService) { }
paymentDetailsId: number = 0;
cardOwnerName: string = '';
cardNumber: string = '';
expirationDate: string = '';
securityCode: string = '';
details: any;
ngOnInit(): void {
}
resetForm(formvalue: NgForm) {
formvalue.reset();
}
submitForm(form: NgForm) {
this.http.postForm(form).subscribe(res => {
this.details = res;
console.log("success");
}
, err => console.log(err));
this.http.getResult();
}
}
PaymentService.service.ts
import { HttpClientModule , HttpClient} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { NgForm } from '@angular/forms';
@Injectable({
providedIn: 'root'
})
export class PaymentServicesService {
constructor(private http: HttpClient) { }
posturl = 'https://localhost:7272/api/PaymentDetail';
getUrl = 'https://localhost:7272/api/PaymentDetail';
list: any;//to store fetched data from db
postForm(form: NgForm) {
return this.http.post(this.posturl, form.value);
}
getResult() {
this.http.get(this.getUrl).subscribe(res => {
console.log("service is called");
this.list = res;
}, err => console.log(err));
}
}
Upon initial loading, the form and view components both display data from the database. After submitting the form and posting the data to the database, the view component does not update. How can I achieve this?