How to delete the items from confirmation popup when we click on button-CodePudding

For the below angular code I have some iteration of data,and now I have to delete the items when we clcik on the delete button it will show the confirmation popup to delete or not if we clcik on yes the particular item has to be removed from the iteration.

.cmponent.ts

public saveHealthyHabits() {
    let isCategoryExist = false;
    let categoryDetails = {
      category: this.clinicalNoteForm.controls.category.value,
      habitDetails: this.healthyHabits.value,
      showDetails: true,
    };
    
    if (this.selectedCategoryDetails) {
      this.selectedCategoryDetails.forEach((selectedCategory) => {
        if (selectedCategory.category === categoryDetails.category) {
          isCategoryExist = true;
          selectedCategory.habitDetails = selectedCategory.habitDetails.concat(
            categoryDetails.habitDetails
          );
        }
      });
    }
   //some code
  }
public deletedata(categoryDetail){
    this.selectedCategoryDetails.forEach((selectedCategory) => {
      //have to add the code here 
})
    
  }

.component.html

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

      <div *ngIf="categoryDetail.showDetails">
      <ul>
          <li 
            *ngFor="let habits of categoryDetail.habitDetails" >
        
            <div >
              <b>{{ clinicalNoteLabels.target }}: </b
              ><span >{{ habits.target }}</span>
            </div>
          </li>
        </ul>
        <div >
       <span   
          [popoverOnHover]="false"
          type="button"
          [popover]="customHabitPopovers"><i  ></i> Delete</span>
        </div>
        <div >

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

In the above code after adding the items If I want to delete some particular item when we clcik on item it will show the confirmation popup with some text and buttons yes and no,

So when we click on yes button from the popup it has to remove the particular item. I am new to angular can anyone help me on this

CodePudding user response：

You could just filter out the element that needs to be removed:

public deletedata(categoryDetail) {
  this.selectedCategoryDetails = 
    this.selectedCategoryDetails.filter(cd => cd !== categoryDetail);
}