2

I'm realizing a chat and I would like to scroll down this chat when the user click on a accordion-group for the 1st time only.

<accordion [closeOthers]="true">
   <accordion-group class="headingPanelCust" *ngFor="let discussion of discussions ; let i = index" [isOpen]="discussion.sender.id == show">
     <div accordion-heading class="headingPanelCust" (click)="openDiscussion(i)" (onOpen)="goDown(i)">
         //things here...
     </div>
  <div class="table-wrapper" style="height: 300px" #scrollMe [scrollTop]="scrollMe.scrollHeight" >
   <table class="table">
          <tbody >
                <tr *ngFor="let message of discussion.discussion">
                        <!-->Users info<!-->
                </tr>
               <div id="bottom"></div>
             </tbody>
           </table>
        </div>

I tried multiple but I still can't figure out what can I do. What I tried :

  • This library

  • [scrollTop] : Gives me a ExpressionChangedAfterItHasBeenCheckedError that I can't fix for some reasons

  • QueryList : Problem is that there is only 1 item, even with the same id

Does anyone have an idea ? I'm stuck on this problem since some time now

Nicolas S.
  • 173
  • 2
  • 12

1 Answers1

0

I found this post that fixed my ExpressionChangedAfterItHasBeenCheckedError issue that you mentioned having as well. That was a very annoying bug!

angular2 scroll to bottom (chat style)

cheesydoritosandkale
  • 569
  • 7
  • 24