Angular 6: Scroll to element on click from child component side-nav

Question

I am using A6 router in where I am rendering 3 components on /new route. I am also using Angular-material and using the sidenav component. My parentComponent is the main content area and the childComponent is the drawer content.

  {
    path: 'new',
    children: [
      {
        path: '',
        component: ParentComponent
      },
      {
        path: '',
        component: SiblingComponent,
        outlet: 'nav',
        children: [
          {
            path: '',
            component: ChildComponent
          }
        ]
      }
    ]
  }

childComponent html

<div class="new-event-side-nav">
  <mat-nav-list>
    <a mat-list-item>
    <span>Some Details</span>
    </a>
    <a mat-list-item [href]="otherDetail">
    <span>Other Details</span>
    </a>
  </mat-nav-list>
</div>

parentComponent

<mat-card>
    <div id="some_detail">
      <p>Some Content</p>
    </div>
    <div id="other_detail">
      <p>Other Content</p>
    </div>
</mat-card>

I can extract the IDs of both divs in my child component using

otherDetail = document.getElementById('other_detail');

and inject it into my child component's html. But on click it's not scrolling down to the element, I'm getting a 404. Further more, my url changes from /new to /%5Bobject%20HTMLDivElement%5D

I'm new to scrolling to elements in Angular 6. Anyone have experience with scrolling to different elements using a sidenav from a child element?

diopside · Accepted Answer · 2018-06-28 20:11:09Z

1

About a year ago I had the same challenge and I had to write my own solution. I was never very happy with it though - making auto-scrolling smooth and natural-looking was waaaay more complicated than I imagined (due to 'scrollTop' not being an animateable attribute). It led me down the rabbit hole of studying javascript 'easing functions' ... don't go that route.

If it comes down to it, you can bind to the scrollTop attribute of any div. If in a directive you might use HostBinding, i.e -

 @HostBinding('scrollTop') scrollTop : number = <<whatever...>>;

Or if its to a child element in the template you could just write normal attribute binding

 <div class="scrolling-div" [scrollTop]="scrollTop" ></div>

With that its simple enough to scroll the div up and down as needed - but it will basically be instant unless you manually animate it with timers / intervals. I combined this technique with a very simple link directive that I placed on every element I wanted to be able to scroll to. That link directive emitted its vertical position on the page (to give the scroller a destination) and also an event whenever it was clicked to alert the scroller. I was able to get mine looking just OK - no easing but there was linear animation that was tolerable to look at. If you're set on writing your own solution let me know and I can share all the code I wrote back in the day

answered Jun 28, 2018 at 20:11

diopside

3,05213 silver badges23 bronze badges

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

1 Comment

stefan.m Over a year ago

a working example can be found here: github.com/angular/angular/issues/7411

Collectives™ on Stack Overflow

Angular 6: Scroll to element on click from child component side-nav

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