CODEWITHSUNDEEP
angularaccordionngx-bootstrap
Yashwanth Gurrapu
Yashwanth Gurrapu

Reputation: 1069

How do I get the target element event of accordion-group on isOpenChange is triggered

Well I want to expand the accordion(collapsable) when I click on the button and scroll the opened accordion to the top of the view.

I am using ngx-bootstrap for this it has an "isOpenChange" event which triggers when any accordion is expanded. Here I am trying to get the event.target of the accordion-group which is expanded. I am using below code for this to scroll in the event.

event.target.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});

I have tried passing the event from "isOpenChange" but it returns only true/false. I am getting below issue as the event is always true/false. I am able to pass it using click function but in my case, the accordion should open when I click outside or some button on another portion of the same page.

I want to be able to track the target event of the element.

<accordion [closeOthers]="true" [isAnimated]="true">
<div class="listitem" *ngFor="let equipment of equipments">
  <accordion-group #group (isOpenChange)="equipmentOpened(equipment, $event)" [class.active]="equipment.active" [isOpen]="equipment.active">
    <accordion-heading accordion-heading>
      <span class="icon icon-{{ equipment.icon }} smallIcon"></span>
      <div class="arrowdown icon-backward-arrow"></div>
      <div class="accordionText">
          <span>{{ equipment.description }}</span>
          <span class="subtitle">Asset Id:<span class="listanswer">{{equipment.id }}</span></span>
      </div>
    </accordion-heading>
    <div class="information-list" *ngIf="group.isOpen">
      <ul>
        <li class="listtitle">
          Asset type
          <div class="listanswer">{{equipment.type}}</div>
        </li>
        <li class="listtitle" *ngIf="equipment.batteryLevel != null">
          Battery Level Sensor
          <div class="listanswer">{{equipment.getBatteryPercentage()}}%</div>
        </li>
        <li class="listtitle" *ngIf="!isNumber(equipment.getTemperature())">
          Temperature
          <div class="listanswer">{{equipment.getTemperature()}}&#176;C</div>
        </li>
      </ul>
      <ul>
        <li class="listtitle">
          Last Seen (UTC timezone)
          <div class="listanswer">{{equipment.getLastSeenDate() }}</div>
        </li>
        <li class="listtitle">
          Owner
          <div class="listanswer">{{equipment.owner}}</div>
        </li>
        <!-- <li class="listtitle">
          Distance
          <div class="listanswer">{{equipment.owner}} meters</div>
        </li> -->
      </ul>
      <button (click)="showMap()" class="closeAndShowButton">Show on map</button>
    </div>

  </accordion-group>
</div>

enter image description here

Upvotes: 0

Views: 1927

Answers (1)

Srinivasan Sekar
Srinivasan Sekar

Reputation: 2119

As per the code in ngx-bootstrap,

@Output() isOpenChange: EventEmitter<boolean> = new EventEmitter();

isOpenChange will return Boolean only.

You can add index on the accordion-group to get the target,

<div class="listitem" *ngFor="let equipment of equipments;let i=index;">
  <accordion-group #group (isOpenChange)="equipmentOpened(equipment, $event,i)" [class.active]="equipment.active" [isOpen]="equipment.active" id="accordion-group-{{i}}">

Get the accordion id,

isOpenChange(equipment:any,isOpen:boolean,i:number)
{
console.log("clicked accordion = >"+"accordion-group-"+i);
}

Upvotes: 3

Related Questions