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

Question

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>

you need to pass the element reference https://stackoverflow.com/questions/46658522/how-to-smooth-scroll-to-page-anchor-in-angular-4-without-plugins-properly/51400379#51400379 — Joel Joseph, May 17 '19 at 11:12
I don't have "ID" for each accordion group as it is dynamic. — Yashwanth Gurrapu, May 17 '19 at 11:13
@YashwanthGurrapu please check the most voted answer in the link https://stackoverflow.com/questions/46658522/how-to-smooth-scroll-to-page-anchor-in-angular-4-without-plugins-properly/51400379#51400379 — Joel Joseph, May 17 '19 at 11:15
@JoelJoseph I understand now. But I don't have template reference as they both are in 2 separate components/views and accordion should scroll to top of the view always. — Yashwanth Gurrapu, May 17 '19 at 11:17

Srinivasan Sekar · Accepted Answer · 2019-05-17T14:58:22.580

3

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);
}

edited May 17 '19 at 14:58

answered May 17 '19 at 11:44

Srinivasan Sekar

2,049
13
22

Well I know this and I have mentioned I can do this using click event, but my main challenge is I should get it when accordion is also opened without clicking it and also on click. – Yashwanth Gurrapu May 17 '19 at 14:24

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

1 Answers1