Animated Full-page Section Scrolling using Ngx-page-scroll Library

Full-page scrolling with sections having animation example tutorial in Angular application; We will discuss how to implement different section scrolling for full-page in Angular application. To quickly integrate the full-page scrolling feature we will be using the Ngx-page-scroll library package.

Full page scrolling is a prepossessing way of showing various sections on the same page. A full-page is divided into multiple sections, in which each section is scrolled with a nice animation effect. Moreover, a floating navigation menu keeps accessibility handy.

In this guide, you will learn how to quickly implement the full-page scrolling feature in the angular app. We will be using the ngx-page-scroll library plugin to add full-page sectional scrolling in the application. It adds a virtual scroll to the page with animated scrollable sections.

How to add Full-page scrollable sections in the Angular app?

The ngx-page-scroll package can be added by following these quick steps:

Step 1 – Create Angular Application
Step 2 – Install Ngx Page Scroll Package
Step 3 – Configure App Module
Step 4 – Update HTML Sections in Angular View
Step 5 – Update Component Class
Step 6 – Add Styling Scrollable Full Page
Step 7 – Run Angular Application

Step 1 – Create Angular Application

To begin with, we will create a new angular application. For that, execute the following npm command:

$ ng new angular-scroll-to-label-app

Move to the application directory

$ cd angular-scroll-to-label-app

Step 2 – Install Ngx Page Scroll Package

After creating the application, install the ngx-page-scroll package by executing the following npm command:

$ npm install ngx-page-scroll-core

Step 3 – Configure App Module

On installing the package, we need to import the required module to use page-scroll feature.

Open the app.module.ts file, them impor the NgxPageScrollCoreModule in the imports array:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxPageScrollCoreModule.forRoot({ duration: 500 })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Step 4 – Update HTML Sections in Angular View

Afterwards, add the HTML template with the different sections and navigation tabs. Open the app.component.html file and update it with the following code:

<div class="main-container">
  <div class="scroll-container">
    <div class="step-section" [ngClass]="{'active': activeSection === 1}" pageScroll
      (click)="scrollTo(introduction, 1)">
      <div class="vertical-nav">
        <div class="section-name">Introduction {{activeSection}}</div>
      </div>
    </div>
    <div class="step-section" [ngClass]="{'active': activeSection === 2}" pageScroll
      (click)="scrollTo(profile, 2)">
      <div class="vertical-nav">
        <div class="section-name">Profile</div>
      </div>
    </div>
    <div class="step-section" [ngClass]="{'active': activeSection === 3}" pageScroll
      (click)="scrollTo(achivements, 3)">
      <div class="vertical-nav">
        <div class="section-name">Achivements</div>
      </div>
    </div>
    <div class="step-section" [ngClass]="{'active': activeSection === 4}" pageScroll
      (click)="scrollTo(contactus, 4)">
      <div class="vertical-nav">
        <div class="section-name">Contact Us</div>
      </div>
    </div>
  </div>

  <div #introduction class="scroll-outer">
    <div class="card-container">
      <h3>Introduction</h3>
    </div>
  </div>
  <div #profile class="scroll-outer">
    <div class="card-container">
      <h3>Profile</h3>
    </div>
  </div>
  <div #achivements class="scroll-outer">
    <div class="card-container">
      <h3>Achivements</h3>
    </div>
  </div>
  <div #contactus class="scroll-outer">
    <div class="card-container">
      <h3>Contact Us</h3>
    </div>
  </div>
</div>

The target sections are provided with template variables, which acts as target to scroll. The navigation tabs having the pageScroll directive and click event handler. The method is passing the target template variable name.

Step 5 – Update Component Class

In the component class, import the PageScrollService, which scroll the page to the target element in the document.

Open app.component.ts file and update as shown below:

import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';
import { PageScrollService } from 'ngx-page-scroll-core';

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

  activeSection = 1;

  constructor(
    private pageScrollService: PageScrollService, 
    @Inject(DOCUMENT) private document: any
  ) { }

  scrollTo(event: HTMLElement, index: number) {
    this.pageScrollService.scroll({
      scrollTarget: event,
      document: this.document
    });

    this.activeSection = index;
  }

}

Step 6 – Add Styling Scrollable Full Page

To add styling to our page, open the app.component.css file, then add following styling to it:

.main-container {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  height: 100vh;
  max-width: 1000px;  
}

.scroll-outer {
  height: 100%;
}

.section-name {
    background: black;
    width: 110px;
    color: #fff;
    text-align: center;
    padding: 5px 20px;
    border-radius: 15px;
}

.step-section.active .section-name{
    background: #fff;
    color: black;
}

.card-container {
  height: 100%;
  background: #c1c1c1;
}

.card-container h3 {
    padding: 25px;
}

.scroll-container {
    width: 25px; 
    top: 15%;
    left: 0;
    position: fixed;
}

.scroll-container:hover {
  opacity: 1;
}

.step-section {
  padding: 8px;
  display: flex;
  flex-direction: row;
  background-color: cream;
  justify-content: flex-start;  
}

Step 7 – Run Angular Application

Finally, see the page scoll implementation in action. Execute the following ng command to run angular app in the browser.

$ ng serve --open

Conclusion

We have completed the full-page scrollable section tutorial by using the ngx-page-scroll package. Using this library we can also build routing based scrollable sections, in page embedded container scrolling, vertical and horizontal animated scrolling as well. You can check more details on official documentation.

Category: Angular