Comprehensive Angular Full Page Scrolling tutorial, Throughout this detailed guide, you will understand how to create full-page scrolling in Angular 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 16 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-demoInstall 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 install ngx-page-scroll-core --legacy-peer-depsRegister 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 { AppComponent } from './app.component';
import { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
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:any) {
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 --openConclusion
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.