Auto scroll in Angular 6 to component AfterViewInit, not working

Question

there's probably a simple fix to this. I have tried two prospective solutions to satisfy my goal of scrolling along the x-axis to a child component upon initiation of the view. For, I put both of these solutions in the AfterViewInit lifecycle hook of my child component so that when it initiates the function will fire. Both of these solutions have failed so far despite feeding them perfectly good elements in the AfterViewInit lifecycle hook. There are no compile time or runtime errors.

In the console I see my console log (refer to code below):

new-user-req.component.ts:27 ElementRef {nativeElement: div.blade-header}

Solution 1:

Element.scrollIntoView()

Solution 2:

window.scrollTo(4000, 0)

this didnt work either... window.scrollBy(window.innerWidth, 0);

Note: I am actually activating this cascade from the parent of the parent since new-user-info is default. So when I open new-user I am opening new-user-req from the parent/parent user-management.... I feel this shouldn't matter considering the functionality actually resides at the child and the element is being referenced properly; however, let me know if you want the parent/parent code.

Also Note: Solution 3: asks me whether I meant scrollTo

window.scrollTo + 20;

Thank you!

Child Component(new-user-req.component): pertinent:

   @ViewChild('next') scroll;
      ngAfterViewInit() {
        console.log(this.scroll)
        // this.scroll.scrollIntoView({ behavior: 'smooth' });
        // window.scrollTo(4000, 0);
        // window.scrollLeft = 20
        window.scrollBy(4000, 0);
      }

_

import { EventEmitter, ViewChild, AfterViewInit } from '@angular/core';
import { Component, OnInit, Output } from '@angular/core';
import { slideToRight } from '../../../../router.animations';
import { Router, ActivatedRoute, UrlSegment, NavigationEnd } from '@angular/router';

@Component({
  selector: 'new-user-req',
  templateUrl: './new-user-req.component.html',
  styleUrls: ['./new-user-req.component.css'],
  animations: [slideToRight()]
})
export class NewUserReqComponent implements OnInit, AfterViewInit {


  @ViewChild('next') scroll;

  constructor() {

  }

  ngOnInit(): void {

  }


  ngAfterViewInit() {
    console.log(this.scroll)
    // this.scroll.scrollIntoView({ behavior: 'smooth' });
    // window.scrollTo(4000, 0);
    // window.scrollLeft = 20
    window.scrollBy(4000, 0);
  }

}

Child template:

pertinent:

<div #next class="blade-header">

_

  <div class="blade" [@routerTransition]>
      <div #next class="blade-header">
        <h3>USER INFORMATION</h3>
        <div class="window-functions">
          <i class="fa fa-window-minimize"></i>
          <i class="fa fa-window-restore"></i>
          <i class="fa fa-window-maximize"></i>
          <a>
            <i class="fa fa-window-close"></i>
          </a>
        </div>
      </div>
      <form action="submit">
        User type:
        <br>
        <select required>
          <option value="" hidden disabled selected data-default></option>
          <option value="Customer">Customer</option>
          <option value="Organization Administrator">Organization Administrator</option>
          <option value="Customer Service Representative">Customer Service Representative</option>
          <option value="Customer Service Administrator">Customer Service Administrator</option>
        </select>
        <br>
        <br> First name:
        <br>
        <input required type="text" name="firstname" value="Richard">
        <br>
        <br> Last name:
        <br>
        <input required type="text" name="lastname" value="Dawkins">
        <br>
        <br> Cell phone:
        <br>
        <input required type="tel" name="cellphone" value="(585) 271-8888">
        <br>
        <br> Office phone:
        <br>
        <input required type="tel" name="officephone" value="(585) 271-8887">
        <br>
        <br> Fax:
        <br>
        <input type="tel" name="fax" value="(585) 271-8886">
        <br>
        <br> City:
        <br>
        <input required type="text" name="city" value="City">
        <br>
        <br> State:
        <br>
        <input required type="text" name="state" value="New York">
        <br>
        <br> Requester title:
        <br>
        <input required type="text" name="requester" value="Requester title">
        <br>
        <br>

        <!-- <div *ngIf="newUserInfoValidState; else allowOrgInput">
            <a [routerLink]="['../',{ outlets: { newuserorginfo: ['newuserorginfo'] } } ]" routerLinkActive='router-link-active'>
            <button autofocus class="next-button">Next</button>
          </a>
        </div> -->
    <!-- <ng-template #allowOrgInput> -->
    <a>
      <button autofocus class="next-button" disabled>Next</button>
    </a>
    <!-- </ng-template> -->


  </form>
</div>
<router-outlet></router-outlet>
<router-outlet name="newuserorginfo"></router-outlet>

Parent Template

<!-- <app-page-header [icon]="'fa fa-users'"></app-page-header> -->
<!-- <app-page-header [heading]="'User Management'" [icon]="'fa fa-users'"></app-page-header> -->



<!-- BLADE LAYER 1 -->
<div class="blade" [@routerTransition]>
  <div class="blade-header">
    <!-- <div class="blade-header" [ngClass]="{'is-minimized-header':minimizeVar}"> -->
    <h3>NEW USER REQUEST</h3>
  </div>


  <!-- [ngClass]="{'feature-nav-button': portalState =='portal-a', 'click-portal-style': portalState =='portal-a'}" -->

  <!-- BLADE Contents -->
  <div class="blade-contents">
    <div (click)="stateUserReq = 'userInfo';" [ngClass]="{'userManSelect': stateUserReq =='userInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='userInfo'}">1 </span> User Information &nbsp;
        <i class="fa fa-chevron-right"></i>
      </h4>
    </div>
    <div (click)="stateUserReq = 'orgInfo';" [ngClass]="{'userManSelect': stateUserReq =='orgInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='orgInfo'}">2 </span> Organization &nbsp;
        <i class="fa fa-chevron-right"></i>
      </h4>
    </div>
    <div (click)="stateUserReq = 'supInfo';" [ngClass]="{'userManSelect': stateUserReq =='supInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='supInfo'}">3 </span> Supervisor &nbsp;
        <i class="fa fa-chevron-right"></i>
      </h4>
    </div>
    <div (click)="stateUserReq = 'secInfo';" [ngClass]="{'userManSelect': stateUserReq =='secInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='secInfo'}">4 </span> Security Profiles &nbsp;
        <i class="fa fa-chevron-right"></i>
      </h4>
    </div>
  </div>
</div>

<div *ngIf="stateUserReq === 'userInfo'">
  <new-user-req></new-user-req>
</div>
<div *ngIf="stateUserReq === 'orgInfo'">
  <new-user-org-info></new-user-org-info>
</div>
<div *ngIf="stateUserReq === 'supInfo'">
  <new-user-supervisor-info></new-user-supervisor-info>
</div>
<div *ngIf="stateUserReq === 'secInfo'">
  <new-user-security-info></new-user-security-info>
</div>

I hope you're using Element.nativeElement.scrollIntoView(). Otherwise it could be that the Angular Natigation is overriding your scrollIntoView. Try subscribing to NavigationEnd of router, and do the scroll then. To narrow down the problem (in case your doing sometiing way off - put it in a setTimeout too (for test purposes). If it's none of those things... — Drenai, May 31 '18 at 15:25
@Ryan thanks, that did it! jsut add .nativeElement to the solutions. I guess this is a thing you have to do in Angular dom manipulation, sometimes... Haven't had to use it yet — imnickvaughn, May 31 '18 at 15:28
downvotes without explanation lol this is a good summation of auto-scroll solutions and probably a common hangup as a regular web dev... so retarded haha I obviously did my research here and it's well written... nobody else will see this now and you will have to tell another person the same thing — imnickvaughn, May 31 '18 at 15:42

score 2 · Answer 1 · answered May 31 '18 at 15:33

2

just add .nativeElement per @Ryan s suggestion

this.scroll.nativeElement.scrollIntoView({ behavior: 'smooth' });

answered May 31 '18 at 15:33

imnickvaughn

2,774
9
25
42

1

Although don't call your variable `scroll`. Call it something like `elemRef` - also give it a type e.g. `@ViewChild('next') elemRef:ElementRef;` - this way you will not be able to accidentally call functions that it doesn't have access to – Drenai May 31 '18 at 16:24

score 0 · Answer 2 · answered Jul 23 '19 at 08:54

0

Had similar problem, I've update with the below code. Now its working fine

element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

answered Jul 23 '19 at 08:54

VinoPravin

947
3
17
32

Auto scroll in Angular 6 to component AfterViewInit, not working

2 Answers2