How to scroll to a component from another component in Angular?

Question

I've been hours, even a couple of days trying to get this done but i can't find a solution, I've tried everything but haven't found a case like mine.

I'm trying to scroll to another component in my one-page website from a navbar, which is another component. The main app component I set like this:

<body>
    <app-navbar></app-navbar>
    <app-page-one id="page-one"></app-page-one>
    <app-page-two id="page-two"></app-page-two>
    <app-page-three id="page-three"></app-page-three>
    <app-footer></app-footer>
</body>

As you can see i put an id on each component so i could identify it when trying to scroll.

I want to click the Page Three button inside my navbar for it to scroll down to the page three component. My navbar component looks like this:

<body class="body">
    <header class="header">
        <a href="#" class="logo">LOGO</a>
        <div class="menu-toggle">
            <fa-icon [icon]="faBars" transform="grow-20"></fa-icon>
        </div>
        
        <nav class="nav">
            <ul>
                
                <li>
                    <a href="#">Page One</a>
                </li>
                <li>
                    <a href="#">Page Two</a>
                </li>
                <li >
                    <a href="#">Page Three</a>
                </li>
                
            </ul>
        </nav>
    </header>
</body>

I've tried using Ngx Page Scroll and everything, but can't seem to make it work. I'm not sure if I need to use Input Output to make them communicate or something like that, anything will help, thanks.

I wouldn't recommend having a body tag inside a component, there should only be one in the entry page (index.html etc) — Phix
– Phix, Commented Jun 17, 2021 at 17:01

chris burd · Accepted Answer · 2021-06-17 18:38:15Z

you can use angular router fragment or the angular cdk for scrolling. I find the angular router is the easiest, but I will give you the link for the angular cdk in case you don't like this way.

first thing on index.html declare a style tag - because without it smooth scrolling won't smooth scroll.

index.html

 <style>
 html {
  scroll-behavior: smooth;
 }
</style>

you can change the scroll offset as you see fit app-router.module.ts

 imports: [RouterModule.forRoot(routes,  {scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled',
  scrollOffset: [0, 64]})]

then your component.ts

            <li>
                <a routerLink="." fragment="page-one" >Page One</a>
            </li>
            <li>
                <a routerLink="." fragment="page-two">Page Two</a>
            </li>
            <li >
                <a routerLink="." fragment="page-three">Page Three</a>
            </li>

edit your component.css a{ cursor: pointer }

you can also do this to scroll to fragments on other views. https://angular.io/api/router/RouterLink

you might need to add a # on each fragment which is better than id #page-two as an example. and you would change the fragment to reflect that. the cdk way is in this link https://material.angular.io/cdk/scrolling/overview

Jon Le · Accepted Answer · 2021-06-17 21:12:33Z

1

Each href needs to have a reference to what element.id you want ngx-page-scroll to move the viewport to. Therefore the body should be something like this.

<li>
    <a href="#page-one">Page One</a>
</li>
<li>
    <a href="#page-two">Page Two</a>
</li>
<li >
     <a href="#page-three">Page Three</a>
</li>

If you refer to the npm page and look at the url, https://www.npmjs.com/package/ngx-page-scroll#usage. You can see there is both a link and an element reference(#usage) to the Usage section (id="usage") of the documentation.

edited Jun 17, 2021 at 21:12

answered Jun 17, 2021 at 16:58

Jon Le

839 bronze badges

Collectives™ on Stack Overflow

How to scroll to a component from another component 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