How do I refresh HTML table after performing POST request in ngOnInit()?

Question

Upon visiting the component invoices.ts , it looks in the background for some updates and applies them to the existing ones. Otherwise when the user has no existing invoices, it will perform a POST request to create them. However, when the user visits the component the POST and PUT operations are called in the ngOnInit() , i still see an empty table untill I refresh the page. How do i automatically refresh the HTML table to fill the newly made invoices without using `window.location.reload()' ?

invoice.component.ts

  ngOnInit() {

  this.auth.getProfile().subscribe((profile : any) => {
  this.userName = profile.user.username;
  this.email = profile.user.email;
}

  this.getAndUpdateInvoices();
}


getAndUpdateInvoices() {

   this.invoiceService.getInvoicesn().subscribe((data : any) => {
     this.invoices= data.invoice;

      this.createUpdate();

})


createUpdate() {

  this.createInvoice({
              client: data.Client,

 ***etc
  })
}


createInvoice(invoice) {
this.invoiceService.newInvoice(invoice).subscribe((data: any) => {
  if (!data.success) {
    console.log(data.message);
  } else {
    console.log(data.message);
  }
});
 }


 this.invoiceService.updateInvoice(this.invoice).subscribe((data: any) => {
              if (!data.success) {
                console.log(data.message);              
              } else {
                console.log(data.message);
              }
            });

}

In my invoice.component.html:

<tr *ngFor="let invoice of invoices"  >
<td> {{invoice.hours}} </td>

Please let me know if you need more info

Answer 1

just call the method which is being used for fetching all the data from your service class here :

createInvoice(invoice) {
    this.invoiceService.newInvoice(invoice).subscribe((data: any) => {
        if (!data.success) {
            console.log(data.message);
        } else {
            console.log(data.message);

           -----HERE----

        }
    });
}