Scroll the last element into view

I have a sample code like

<div class="container">
<button mat-raised-button (click)="addItem()">Add Item</button>

<div #listContainer class="list-container">
@for (item of items()){
<mat-card>
<mat-card-title>Item {{ item }}</mat-card-title>
</mat-card>
}
</div>
</div>


Any time an item is added I want to grant that the last element will be scrolled into view.

In Angular I have the following code:

export class AppComponent {
items: Signal<number[]> = Signal.signal([]); // Signal for the items

@ViewChild('listContainer') listContainer!: ElementRef;

constructor() {
// Effekt zur Überwachung von Änderungen
effect(() => {
const itemsArray = this.items();
if (itemsArray.length) {
// ************** question
setTimeout(() => {
const lastCard = this.listContainer.nativeElement.lastElementChild;
if (lastCard) {
lastCard.scrollIntoView({ behavior: 'smooth' }); // smooth scrolling
}
}, 0); // changed queuing
}
});
}

addItem() {
this.items.update((currentItems) => [...currentItems, currentItems.length + 1]);
}
}



My question:

1. How is the queuing into the JS done? Which is processed first and which later on? First the click on the add button which is obvious. But than what's next first the effect or first the @for loop? And if the effect runs than does the setTimeout grant (!) that this is run when the rendering is finished?
2. Is if the execution granted or are the chances quite high be changed in the near future?

Bonus-question - not that important:

1. I found an alternative approach https://stackoverflow.com/a/77828362/325868 which would add just a dummy-element at the end of the list. I would like to call it only once. Therefore the method in the ngAfterViewChanged seems an overkill. Other ideas?

Continue reading...