Create Full Page Scrolling in Angular 12 with NGX Page Scroll

Last updated on: by Editorial Team

Comprehensive Angular 12 Full Page Scrolling tutorial, Throughout this detailed guide, you will understand how to create full-page scrolling in Angular 12 application using the ngx-page-scroll package.

The ngx-page-scroll is a profound plugin for implementing full page scrolling and virtual scrolling in angular; you can create animated scrolling in angular not just that we will also let you know the facile way to configure and use NGX page scroll module in an immaculate manner.

Angular 12 Full Page Scroll Example

Here are the steps that are to be covered in this step by step tutorial:

  • Install Angular App
  • Install NGX Page Scroll Plugin
  • Register Scroll Plugin
  • Add Full Page Scroll in Angular HTML Template
  • Define Page Scroll Login in TypeScript File
  • Style Page Scroll Component
  • Invoke Angular Development Server

Install Angular App

Make sure you have latest Angular CLI installed on your system, initialize below command on the console to create a new angular project:

ng new angular-full-page-scroll-demo

Install NGX Page Scroll Package

After getting inside the project, you have to invoke the command to install the ngx page scroll plugin in angular app:

npm i ngx-page-scroll-core

Register Full Page Scroll Module

Subsequently, open the app.module.ts file, import the NgxPageScrollCoreModule from from ‘ngx-page-scroll-core’ likewise register the ngx page scroll module in imports array also define the scroll duration numerically.

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: 1600 })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Create Page Scroll HTML Structure

Next, create a full page scroll HTML structure in the angular template file. Open, app.component.html file and add the given below code:

<div class="main-container">
  <div class="scroll-container">
    <div class="step-section" [ngClass]="{'active': activeSection === 1}" pageScroll
      (click)="fullPageScroll(section1, 1)">
      <div class="vertical-nav">
        <div class="circle"></div>
      </div>
    </div>
    <div class="step-section" [ngClass]="{'active': activeSection === 2}" pageScroll
      (click)="fullPageScroll(section2, 2)">
      <div class="vertical-nav">
        <div class="circle"></div>
      </div>
    </div>
    <div class="step-section" [ngClass]="{'active': activeSection === 3}" pageScroll
      (click)="fullPageScroll(section3, 3)">
      <div class="vertical-nav">
        <div class="circle"></div>
      </div>
    </div>
    <div class="step-section" [ngClass]="{'active': activeSection === 4}" pageScroll
      (click)="fullPageScroll(section4, 4)">
      <div class="vertical-nav">
        <div class="circle"></div>
      </div>
    </div>
    <div class="step-section" [ngClass]="{'active': activeSection === 5}" pageScroll
      (click)="fullPageScroll(section5, 5)">
      <div class="vertical-nav">
        <div class="circle"></div>
      </div>
    </div>
  </div>

  <div #section1 class="scroll-outer">
    <div class="card-container">
      <h3>Section 1</h3>
    </div>
  </div>
  <div #section2 class="scroll-outer">
    <div class="card-container">
      <h3>Section 2</h3>
    </div>
  </div>
  <div #section3 class="scroll-outer">
    <div class="card-container">
      <h3>Section 3</h3>
    </div>
  </div>
  <div #section4 class="scroll-outer">
    <div class="card-container">
      <h3>Section 4</h3>
    </div>
  </div>
  <div #section5 class="scroll-outer">
    <div class="card-container">
      <h3>Section 5</h3>
    </div>
  </div>
</div>

Define Page Scroll Login in TypeScript File

Now, open, app.component.ts file and place the following code:

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

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

export class AppComponent {

  activeSection = 1;

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

  fullPageScroll(e: HTMLElement, i) {
    this.pageScrollService.scroll({
      scrollTarget: e,
      document: this.document
    });

    this.activeSection = i;
  }
}

Style Page Scroll Component

Now, you have to style the page scroll component so open, app.component.scss file and update with the following code:

body {
    margin: 0;
    padding: 0;
}

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

.scroll-outer {
  height: 100%;
}

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

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

.scroll-container {
  width: 25px;
  top: 25%;
  right: 12%;
  opacity: 0.7;
  position: fixed;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}

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

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

.vertical-nav {
  position: relative;
}

.step-section .circle {
    background-color: white;
    border: 4px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    display: inline-block;
}

.step-section.completed .circle {
  visibility: visible;
  border-color: rgb(0, 0, 0);
}

.step-section.active .circle {
  visibility: visible;
  border-color: rgb(0, 0, 0);
}

.step-section.empty .circle {
  visibility: hidden;
}

Run Angular Development Server

Let us test the angular page scroll UI component, but first start the application:

ng serve --open

Conclusion

The angular full page scrolling tutorial is over. Using this component, you can build beautiful fullscreen scrolling websites in angular. We touched only basic options of the ngx scroll plugin; however, you can explore more Directive API and add more awesome features in your full page scroll site.