How to change content of Mat-Label without refreshing the page

Question

I have a mat-label which displays Customer End Date. I get the end date initially when I do a GET request to an API. Suppose the end date is 16-05-2099.I display the end date as it is. Now I have a delete button which does a soft delete.It means that it will not remove the Details it will just change the end date to current date ie to today's date.

Initially I display my Details like this:

  <div *ngIf="showContact; else editableContact"> <div *ngFor="let element of sampleData1.contact"> <div *ngIf="contact.toString() === element.contactType" [attr.data-status]="element.contactStatus"> <br /> <mat-label hidden>Contact Id: {{ element.contactId }}</mat-label> <mat-label>Contact Sub Type: {{ element.contactSubType }}</mat-label> <br /> <mat-label>Contact Reference Type:{{ element.referenceNumber }} </mat-label> <br /> <mat-label>Agreement Id : [</mat-label> <mat-label *ngFor="let agreementIds of element.agreementId"> {{ agreementIds + ' ' }} </mat-label> <mat-label>]</mat-label> <br /> <mat-label>Contact Last Verified Date: {{ element.lastVerifiedDate | date: 'dd/MM/yyyy' }}</mat-label> <br /> <mat-label>Contact End Date:{{ element.endDate | date: 'dd/MM/yyyy' }}</mat-label> </div> </div> </div> 

Typescript Code:

 deleteContact(contactId) {
const deleteCustomerId = this.customerId;
const deleteContactId = contactId;
this.customer360Service.deleteIndCustContact(deleteCustomerId, deleteContactId).subscribe(
  data => {
    console.log(data);
    this.snackbar.open('Contact Deleted Successfully', 'Close', {
      duration: 3000
    });
  },
  err => {
    this.snackbar.open('Failed To Delete Contact', 'Close', {
      duration: 3000
    });
  }
);

}

Delete Button HTML:

 <button
                                style="float: right"
                                [hidden]="showContactDeleteButton"
                                mat-button
                                color="black"
                                matTooltip="Delete"
                                class="view-data"
                                (click)="deleteContact(element.contactId)"
                              >
                                <i class="fa fa-trash" aria-hidden="true"></i>
                              </button>

The thing is I don't need to write any code in HTML.I am getting data from backend I just need to display it.I don't have to write any logic in Typescript or anywhere. Initially I will get an End Date from API and then when I hit a delete API the API will give me a current date which I just have to display.

Everything works fine, however the only issue I am facing is that after deleting the display date does not change.I have to refresh the page and fetch data again from backend to see the changes. How can I display new date without refreshing the page.

Answer 1

You need to update the object in array when your delete function successfully completes the request to the API. Now to update object, you need some unique property to identify object in array. For that purpose, you can use index of object

Now assuming your array name is dates which you are using inside the loop

<div *ngFor="let element of sampleData1.contact; let i = index">
  <mat-label>Contact End Date:{{ element.endDate | date: 'dd/MM/yyyy' }}</mat-label>
  <button (click)="deleteAddress(element.addressId, i)" </button> //i will be the index of element inside array
</div>

Then inside your delete function

deleteAddress(addressId, index) {
const deleteCustomerId = this.customerId;
const deleteAddressId = addressId;
this.customer360Service.deleteIndCustAdd(deleteCustomerId, deleteAddressId).subscribe(
  data => {
    console.log(data);
    // here you can delete the whole object or update it

    this.sampleData1.contact[index].endDate = "You new Date" // <- this will his the object and auto updates the view without reloading
    this.snackbar.open('Address Deleted Successfully', 'Close', {
      duration: 3000
    });
  },
  err => {
    this.snackbar.open('Failed To Delete Address', 'Close', {
      duration: 3000
    });
  }
);
}

Answer 2

Provided the data includes all data you need for your contact and it depends on the structure of your variable and what subscribe returns, this should update your data and refresh your view.

 deleteContact(contactId) {
const deleteCustomerId = this.customerId;
const deleteContactId = contactId;
this.customer360Service.deleteIndCustContact(deleteCustomerId, deleteContactId).subscribe(
  data => {
    console.log(data);
    this.sampleData1.contact = data; // add this
    this.snackbar.open('Contact Deleted Successfully', 'Close', {
      duration: 3000
    });
  },
  err => {
    this.snackbar.open('Failed To Delete Contact', 'Close', {
      duration: 3000
    });
  }
);