Angular 5 Scroll To Top On Every Route Click

One key feature that can enhance the user experience of your Angular 5 application is implementing a scroll to top functionality on every route click. This not only ensures a smoother browsing experience for your users but also adds a touch of professionalism to your web application. In this article, we will explore a simple yet effective method to achieve this using Angular 5.

To begin with, we need to install Angular Router in our project if you haven't already. You can do this by running the following command in your project directory:

npm install @angular/router

Next, let's create a new Angular service that will handle the scroll to top functionality. You can generate a new service by running the following Angular CLI command:

ng generate service scroll

Once the service has been generated, open the `scroll.service.ts` file in your project and add the following code:

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ScrollService {

  constructor(private router: Router) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        window.scrollTo(0, 0);
      }
    });
  }
}

In the code above, we are subscribing to the router events in the constructor of the service. Whenever a navigation event occurs and it is an instance of `NavigationEnd`, we simply use `window.scrollTo(0, 0)` to scroll to the top of the page.

Next, we need to inject this service in our root component to make sure it is available throughout our application. Open your `app.component.ts` file and modify it as follows:

import { Component } from '@angular/core';
import { ScrollService } from './scroll.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private scrollService: ScrollService) {}
}

By injecting `ScrollService` in our root component, we are ensuring that the scroll to top functionality is triggered on every route change in our Angular 5 application.

Lastly, don't forget to add the service to your module's providers array in the `app.module.ts` file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ScrollService } from './scroll.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [ScrollService],
  bootstrap: [AppComponent]
})
export class AppModule { }

And that's it! You have now successfully implemented the scroll to top functionality on every route click in your Angular 5 application. This simple yet effective feature can go a long way in improving the overall user experience of your web application.