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 i.e 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.

How are you getting the element in your html, is it inside a loop or a component variable? — asimhashmi, May 16 '19 at 06:35
@AsimHashmi I hit a get request to an API which gives me end date. In html I use a loop and display it `element.startDate`,`element.endDate`, `element.address` etc etc — Cpt Kitkat, May 16 '19 at 06:39

asimhashmi · Answer 1 · 2019-05-16T07:26:30.890

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
    });
  }
);
}

I don't need to splice the data. I am just doing a soft delete. The end date will change from a time in future to current date.That's all. The object will still be there. Say initially end date was 16-05-2020 then on click of delete it will change to current date. — Cpt Kitkat, May 16 '19 at 07:20
I've updated my answer, have a look :) you can update the object at that specific index — asimhashmi, May 16 '19 at 07:27

score 0 · Answer 2 · edited May 16 '19 at 10:44

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
    });
  }
);

So, you iterate variable sampleData1.contact in your html template. Depending on what sort of structure sampleData1 and sampleData1.contact is, I suppose the latter is an array, you can try and add `this.sampleData1.contact = data;` below the `console.log(data);` line. — jonimv, May 16 '19 at 07:19

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

2 Answers2