accordion-toggle check open close - Angular active/inactive-CodePudding

Here is my HTML page which has dynamic toggle shown below.

<tr align="center" *ngFor="let section of sectionList ; let RowIndex = index;">
   <td colspan="6">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" >
         <tr>
            <td><button (click)="checkUncheck(RowIndex)" data-toggle="collapse" [attr.data-target]="'#SectionDemo'  RowIndex"
                ><span
                  ></span> </button>
            </td>
            <td>{{section.sectionName}} {{RowIndex}}</td>
         </tr>
         <tr>
            <td colspan="6">
               <div >
                  <div  [attr.id]="'SectionDemo'   RowIndex">
                     yeah man test {{RowIndex}}
                  </div>
               </div>
            </td>
         </tr>
      </table>
   </td>
</tr>

Now the thing is I want to get the open/close in typescript true false, so far what I've done is.

checkUncheck(event){
    console.log(event);
    setInterval(j => {
      const domElement = this.elementRef.nativeElement.querySelector(`#SectionDemo`   event);
      console.log(domElement);
      clearInterval();
    }, 1500);
}

Now the result which I get is this.

<div _ngcontent-khl-c237=""  id="SectionDemo0" style=""> yeah man test 0 </div>

from console.log(domElement); Now here I want to get without setInterval so I can at least from accordian-body collapse show make true/false from open/close.

CodePudding user response：

Directive [ngClass]

Script:

isCollapsed = true

toggleCollapsed() {
  this.isCollapsed = !this.isCollapsed
}

getAccordionStyle(event) {
  return isColapsed ? 'collapsed' : 'not-collapsed'
}

Template:

<div (click)="toggleCollapsed()">Some accordion item... </div>
<div [ngClass]="getAccordionStyle()"> Your collapsed content here... </div>

CSS:

.collapsed {
  display: none;
  /* Your collapsed styling */
}

.not-collapsed {
  /* Your styling when not collapsed */
}

Structural Direcrtive *ngIf

Script:

isExpanded = false

toggleCollapsed() {
  this.isExpanded = !isExpanded
}

Template:

<div (click)="toggleCollapsed()">Some accordion item... </div>
<div *ngIf="isExpanded"> Your collapsed content here... </div>

Here's a basic example on Stackblitz.