how to toggle the row using angular8

Question

i have multiple rows, if i open one row then i will not be able to toggle it, i mean it wont be closed unless the other row is clicked for viewing the inside data. I must be able to toggle rows if i have not done anychanges to form, incase if i have made changes to that form, it must show me a confirmation message as it is showing currently.

DEMO: DEMO

TS:

 editEo(eo,index) {

      if(this.eoInfoForm.dirty) {

        this.confirmationDialogService.confirm('Please confirm..', 'Do you really want to save changes ?')
    .then((confirmed) => {
         let openedIndex = this.eoList.findIndex(obj => obj.OpenCloseStatus === true);
        confirmed ? this.OpenCloseEvent(eo,openedIndex):this.OpenCloseEvent(eo,index);
      if(confirmed){
        console.log("works")
      }
    })
    .catch(() => console.log('User dismissed the dialog (e.g., by using ESC, clicking the cross icon, or clicking outside the dialog)'));

  }else {
          //  this.eoDetailsList = previous; 
           eo.isCollapse = !eo.isCollapse
           this.OpenCloseEvent(eo,index);
          }
  }

HTML:

 <a href="javascript:void(0);" (click)="editEo(eo,i)" class="accordion-toggle">+ </a>

Answer 1

Just replace the line:

this.eoList[objIndex]['OpenCloseStatus'] = true;

with:

this.eoList[objIndex]['OpenCloseStatus'] = !this.eoList[objIndex]['OpenCloseStatus'];