Scroll to bottom of list with Angular

Issue

I have this list that I need to scroll to the bottom element, how do I do this?

Similar example I found but with jquery (I need it in typescript): Scroll to bottom of list with Javascript https://jsfiddle.net/j1oqv7xf/

<div class="listing">
    <ul class="line">
        <li *ngFor="let i of listing; let idx = index" class="company" (click)="selectedLine($event, idx)"
        (dblclick)="doubleClicks($event, idx)" [ngClass]="{ 'selected': idx == selectedItem }">
            <fa-icon class="li-icon arrow" [icon]="['fas', 'chevron-right']"></fa-icon>
            <fa-icon class="li-icon" [icon]="['fas', 'folder-open']"></fa-icon>
            <div class="values">                
                <div class="name" contenteditable="true" (keydown.enter)="onEnter($event, idx)">{{i.name}}</div>
                <div *ngIf="!isSearches" class="counts">{{i.countChild}}</div>
                <div *ngIf="isSearches" class="counts">-</div>
            </div>
        </li>      
    </ul>
</div>

Solution

You can do this with vanilla javascript. First step is to select the element, which you could do with document.querySelector, but Angular has ViewChild which is safer.

Add a template reference to whichever html element is scrollable, my guess is it's your outer div here:

<div #list class="listing">

And in the component ts:

  @ViewChild('list') list?: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    const maxScroll = this.list?.nativeElement.scrollHeight;
    this.list?.nativeElement.scrollTo({ top: maxScroll, behavior: 'smooth' });
  }

Example:

https://stackblitz.com/edit/angular-ivy-5tjznl?file=src/app/app.component.ts

Answered By - Chris Hamilton