CODEWITHSUNDEEP
angular
Igor.R
Igor.R

Reputation: 185

Scroll to the bottom of the page after element was added to the DOM - Angular 6

I have a form where I am adding objects to An array, then I am giving the user a preview of the created objects.

I am looping the array with a *ngFor and each element added to the bottom of the screen. My goal that after each element was added there will be an auto scroll to the bottom of the page

Currently i am using a setTimeOut function, but i was wondering is there a better way? 

this.createdAppointments.push(appointmentFormValues);

    setTimeout(() => {
      window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
    }, 1);

Upvotes: 0

Views: 278

Answers (1)

Vitalii Bobrov
Vitalii Bobrov

Reputation: 191

You can call scrollIntoView method on newly added items, see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Upvotes: 1

Related Questions