Change visibility of a component and scroll to it not working in Angular

Question

I have a parent component that has several components inside it:

<div  class="mx-sm-auto mb-5 px-0 container">
  <app-set-vehicle-details id="step1" #step1 (step1Finished)="enableStep2()"></app-set-vehicle-details>
  <app-product-selection id="step2" *ngIf="step2Enabled"></app-product-selection>
  <app-product-additional id="step3" *ngIf="step3Enabled"></app-product-additional>
</div>

All the child elements emmit a finished once they get unlocked and you can proceed to next step. So you enable the next step as follows:

step2Enabled = false;

enableStep2() {
  this.step2Enabled = true;
  this.scrollToElement('step2');
}

scrollToElement(id: string): void {
  const element = document.querySelector('#' + id);
  if (element) {
    element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
  }
}

So step2 component gets visible, but scroll to it it's not working. I assume this is happening because the visibility of the second component didn't to true before the scrollToElement call, because it works once the component is visible.

How can I make this behavior to make this work?

Thanks!

You're scrolling to something which doesn't yet exist. It will only exist on the next render. — Roberto Zvjerković
– Roberto Zvjerković, Commented Mar 9, 2020 at 15:55
Yes, that's why I was suspecting. How can I achieve that behavior? (That's my real question indeed...) — Sonhja
– Sonhja, Commented Mar 9, 2020 at 15:56
The easiest way would be to toggle display: none css style instead of *ngIfing those elements. — Roberto Zvjerković
– Roberto Zvjerković, Commented Mar 9, 2020 at 15:59

Martin Parenteau · Accepted Answer · 2020-03-10 13:20:32Z

2

You can monitor the presence of the child component with ViewChildren, by subscribing to the QueryList.changes event.

First, set a template reference variable on the child component:

<app-product-selection #step2 *ngIf="step2Enabled"></app-product-selection>

Then use that variable to refer to the component host element in code, and subscribe to the QueryList.changes event in ngAfterViewInit. When the event is triggered, scroll the component into view:

@ViewChildren("step2", { read: ElementRef }) step2List: QueryList<ElementRef>;

ngAfterViewInit() {
  this.step2List.changes.subscribe(() => {
    if (this.step2List.length > 0) {
      (this.step2List.first.nativeElement as HTMLElement).scrollIntoView();
    }
  });
}

See this stackblitz for a demo.

edited Mar 10, 2020 at 13:20

answered Mar 9, 2020 at 16:42

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

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

Comments

Sonhja · Accepted Answer · 2020-03-09 16:43:09Z

-2

My solution is this:

enableStep2() {
   this.step2Enabled = true;
   setTimeout(() => {
     this.scrollToElement('step2');
   });
}

This waits until step2 is visible. So perfect!

answered Mar 9, 2020 at 16:43

Sonhja

8,51022 gold badges79 silver badges138 bronze badges

Collectives™ on Stack Overflow

Change visibility of a component and scroll to it not working in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related