Angular best way to get conditional element to automatically scroll into view

Question

I have an element that that is conditionally inserted with an *ngIf condition. When it is inserted I want to scroll it into view. The following technique works but it seems clumsy and I would like to improve it.

          <app-text-create id="textcreate" *ngIf="modeNewEntry"          
                  (load)="document.getElementById('textcreate').scrollIntoView()"
          ></app-text-create>

When the component state property modeNewEntry goes true the text entry box gets inserted on the bottom of the page. Without the scrollIntoView() call it is generally not visible.

Is there a better way to get access to the HTMLElement than the document.getElementById(..) expression?

PS. The IDE I am using, WebStorm, thinks the document reference as undefined even though this does works. Is that a bug or is there a reason for that?

Do you had try using reference ?

ThMore
– ThMore

2019-12-28 06:00:39 +00:00
Commented Dec 28, 2019 at 6:00 — ThMore
– ThMore, Commented Dec 28, 2019 at 6:00

SiddAjmera · Accepted Answer · 2019-12-28 06:07:40Z

1

Add the component in a wrapping div:

<div #textCreate>
  <app-text-create id="textcreate" *ngIf="modeNewEntry">
  </app-text-create>
</div>

And then when you click a button to set modeNewEntry to true, also call scrollIntoView() on the ElementRef's nativeElement for this div:

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  modeNewEntry = false;
  @ViewChild('textCreate', { static: false }) textCreateComponent: ElementRef;

  showComponent() {
    this.modeNewEntry = true;
    this.textCreateComponent.nativeElement.scrollIntoView();
  }
}

Here's a Working Code Demo 🚀 for your ref.

answered Dec 28, 2019 at 6:07

SiddAjmera

39.6k7 gold badges78 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AlanObject Over a year ago

I thought about using the ViewChild decorator but I forgot that about the nativeElement property that it is contained. Also I don't need the id attribute anymore.

Collectives™ on Stack Overflow

Angular best way to get conditional element to automatically scroll into view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related