-2

I have a big form and, below the button that submitts it, a div that contains an image of a progress bar, to show to the user that the http request is being precessed:

<div *ngIf="formSubmitted">
    <img src="assets/progressbar.gif">
</div>

When the form is submitted, the image is showed but, as my form is quite big and takes all the screen, the user needs to scroll down to see it. How can i use Angular 9 to force the browser to scroll down so the user can see that content? Obs: I don't want the browser scroll to the bottom of the page, but to the bottom of the div.

Joel Menezes
  • 11
  • 5
  • 1
    Does this answer your question? [Scroll to bottom of div?](https://stackoverflow.com/questions/270612/scroll-to-bottom-of-div) – Brandon Taylor Oct 05 '21 at 15:23
  • No, becouse It's not Angular. It's JQuery and pure Javascript – Joel Menezes Oct 05 '21 at 16:29
  • And what difference does Angular make here? You want to scroll to the bottom of a container when your form is submitted, correct? If so, you're still going to use a more or less vanilla JS implementation to scroll to the element. – Brandon Taylor Oct 05 '21 at 16:57
  • Yeah i know the js code to scroll to the bottom but where i need to put it? it won't work if i just place the code inside the fucntion who is called when the form is submitted bc its an async method. So, knowing Angular maybe i have to detect when the div is created and, after that, make the action i want. – Joel Menezes Oct 05 '21 at 18:51
  • I'm assuming you're making a service call when your form is submitted? If so, you can subscribe to the return of the service call and then fire the JS necessary to scroll to the end of the container. I would add a slight delay to that code using asyncScheduler to allow the div containing the image a few milliseconds to render. – Brandon Taylor Oct 05 '21 at 19:00
  • Well it's an option but I'm thinking about a more appropriate way to do it. My problem is more related to that div element than the form submission itself. I think if i'd make a directive to use on that element i could do it at the time the directive is created, plus i could use it on other situations. But i'm new in Angular and i don't know what kind of directive i should use to achieve it, if i need to use some especific event in the directive, or subscribe to some observable... – Joel Menezes Oct 05 '21 at 19:22
  • Alternatively, when the value comes back from your subscription, emit an event that you can pick up in the outer container, and then fire the scrolling code. Keep in mind that Angular even emitters do not bubble past their parent container, so if your hierarchy is not parent/child, you'll need to use a subject/service to communicate to the outer container. – Brandon Taylor Oct 05 '21 at 19:39
  • If this is something you need to re-use, you can make a component to provide the outer container and image, with a content slot for your form. – Brandon Taylor Oct 05 '21 at 19:40

1 Answers1

-1

Well i solved the problem creating this attribute directive:

@Directive({
selector: "[scrolldown]",
})

export class ScrollDownDirective {

    constructor(private elementref: ElementRef) {}

    ngAfterContentInit() {          
        const element: HTMLElement = this.elementref.nativeElement;         
        element.scrollIntoView()
    }
}

and I applied it on the div:

<div *ngIf="formSubmitted" scrolldown>
   <img src="assets/progressbar.gif">
</div>
Joel Menezes
  • 11
  • 5