How to remove the selected data from saved data when we click on button in a selected one

Question

In my application I have saved the data when we click on it(we can add the multiple data by entering some data and save the multiple data by clicking the save button).

.component.html

 <ng-container *ngFor="let categoryDetail of selectedCategoryDetails">
      <div class="__header">
        <div>
          <b>{{ categoryDetail.category }}</b>
        </div>
         </div>

      <div
        class="clinical-note__category__details"
        *ngIf="categoryDetail.showDetails">
      
        <ul>
          <li class="habit-list"
            *ngFor="let habits of categoryDetail.habitDetails" >
        
            <div class="target-details">
              <b>{{ clinicalNoteLabels.target }}: </b
              ><span class="habit-list__value">{{ habits.target }}</span>
            </div>
          </li>
        </ul>
        <div class="habit-footer">
       <span class="m-l-10"  
          [popoverOnHover]="false"
          type="button"
          [popover]="customHabitPopovers"><i class="fa fa-trash-o" ></i> Delete</span>
        </div>
        <div class="clinical-note__popoverdelete">

        <popover-content #customHabitPopovers [closeOnClickOutside]="true">
          <h5>Do you want to delete this habit?</h5>
          <button
          class="btn-primary clinical-note__save"  (click)="deletedata(habits);customHabitPopovers.hide()">yes </button>
       
        </popover-content></div>
      </div>
    </ng-container>

In the above code when we click on delete button it will show some popup having buttons yes(implemented in above code) and now so my requirement is when we clcik on yes button in from the popover it has to delete the particular one.

.component.ts

 public saveHealthyHabits() {
    let isCategoryExist = false;
    let categoryDetails = {
      category: this.clinicalNoteForm.controls.category.value,
      habitDetails: this.healthyHabits.value,
      showDetails: true,
    };
    if (this.customHabitList.length) {
      categoryDetails.habitDetails = categoryDetails.habitDetails.concat(
        this.customHabitList
      );
      this.customHabitList = [];
    }

    if (this.selectedCategoryDetails) {
      this.selectedCategoryDetails.forEach((selectedCategory) => {
        if (selectedCategory.category === categoryDetails.category) {
          isCategoryExist = true;
          selectedCategory.habitDetails = selectedCategory.habitDetails.concat(
            categoryDetails.habitDetails
          );
        }
      });
    }
    if (!this.selectedCategoryDetails || !isCategoryExist) {
      this.selectedCategoryDetails.push(categoryDetails);
    }

    this.clinicalNoteForm.patchValue({
      category: null,
    });
    this.healthyHabits.clear();
public deletedata(habits){
   if (this.selectedCategoryDetails) {
    this.selectedCategoryDetails.forEach((selectedCategory) => {
  
      if (selectedCategory.category ==categoryDetails.category) {
        isCategoryExist = true;
       
       this.selectedCategoryDetails.splice(habits, 1);
      }
    });
   }
  }

The above code I have written is for saving the data(we can enter multiple data and save multiple )

Like the above I have to delete the particular one when we click on yes button from the popover.

Can anyone help me on the same

Answer 1

If you're iterating in your html like:

<... *ngFor="let categoryDetails of selectedCategoryDetails" ...>

and your button with deletedata() is in the scope of ngFor, you can:

1. Change your iteration to include index of an item and trackBy function for updating the array in view:

<... *ngFor="let categoryDetails of selectedCategoryDetails; let i = index; trackBy: trackByFn" ...>

2. On the button click pass the index to deletedata() method like:

deletedata(index)

3. Create your deletedata method like:

   deletedata(index:number){
       this.selectedCategoryDetails.splice(index, 1);
       // other code here, like calling api
       // to update the selectedCategoryDetails source
       // etc.
   }
   

4. Create trackByFn method like:

    trackByFn(index,item){
        return index;
    }
   

EDIT: Without index

If you want to iterate over selectedCategoryDetails in the ts file, without using ngFor with index in your html, you can have your deletedata like this:

deletedata(categoryDetails:any){
    for (let i = this.selectedCategoryDetails.length - 1; i >= 0; i--) {
      if (this.selectedCategoryDetails[i] === categoryDetails.category) {
        this.selectedCategoryDetails.splice(i, 1);
      }
    }
}

It will iterate over selectedCategoryDetails backwards and remove the categoryDetails if it finds it in the array of objects.

Now, you only need to pass the categoryDetails to deletedata in your html:

(click)="deletedata(categoryDetails);customHabitPopovers.hide()"