Angular 12 full page scroll example tutorial; i am going to show you easy way how to implement full page scroll in angular 12 app using npm library.
The ngx-page-scroll is animated scrolling functionality for angular written in pure typescript with no additional dependencies.
The features of ngx-page-scroll-core are:
- flexible: trigger scroll animations after component load, server response, etc.
- easy-to-use directive: scroll to an element referenced in the href-attribute (
href="#mytarget
) just by addingpageScroll
directive - customizable: adjust duration, offset or whether scrolling stops if the user interrupts (read more)
- use custom easing functions to calculate the scroll position over time
- works across routes (scrolls to target element as soon as the routing has finished) and in both directions (horizontal/vertical)
Angular 12 Full Page Scrolling Tutorial
- Step 1 – Create New Angular App
- Step 2 -Import Modules on Module.ts File
- Step 3 – Add Code on View File
- Step 4 – Add Code On Component ts File
- Step 5 – Update CSS File
- Step 6 – Start Angular App And PHP Server
Step 1 – Create New Angular App
First of all, open your terminal and execute the following command on it to install angular app:
ng new my-new-app
Then install NPM package called ngx-page-scroll-core to create full page scrolling. You can install the package by execute the following command on terminal:
npm i ngx-page-scroll-core
Step 2 -Import Modules on Module.ts File
Import modules; so go to src/app directory and open app.module.ts file. Then add the following code into it:
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 3 – Add Code on View File
Create html markup for full page scroll app. So, visit src/app/app.component.html and update the following code into it:
<div class="main-wrapper"> <div class="step-container"> <div class="step" [ngClass]="{'active': activeUIIndex === 1}" pageScroll (click)="scrollCustomImplementation(sec1, 1)"> <div class="v-stepper"> <div class="circle"></div> <div class="line"></div> </div> </div> <div class="step" [ngClass]="{'active': activeUIIndex === 2}" pageScroll (click)="scrollCustomImplementation(sec2, 2)"> <div class="v-stepper"> <div class="circle"></div> <div class="line"></div> </div> </div> <div class="step" [ngClass]="{'active': activeUIIndex === 3}" pageScroll (click)="scrollCustomImplementation(sec3, 3)"> <div class="v-stepper"> <div class="circle"></div> <div class="line"></div> </div> </div> <div class="step" [ngClass]="{'active': activeUIIndex === 4}" pageScroll (click)="scrollCustomImplementation(sec4, 4)"> <div class="v-stepper"> <div class="circle"></div> <div class="line"></div> </div> </div> <div class="step" [ngClass]="{'active': activeUIIndex === 5}" pageScroll (click)="scrollCustomImplementation(sec5, 5)"> <div class="v-stepper"> <div class="circle"></div> </div> </div> </div> <div #sec1 class="card-wrapper"> <div class="card"> <div class="card-container"> <h4><b>John Doe 1</b></h4> <p>Architect & Engineer</p> </div> </div> </div> <div #sec2 class="card-wrapper"> <div class="card"> <div class="container"> <h4><b>John Doe 2</b></h4> <p>Architect & Engineer</p> </div> </div> </div> <div #sec3 class="card-wrapper"> <div class="card"> <div class="container"> <h4><b>John Doe 3</b></h4> <p>Architect & Engineer</p> </div> </div> </div> <div #sec4 class="card-wrapper"> <div class="card"> <div class="container"> <h4><b>John Doe 4</b></h4> <p>Architect & Engineer</p> </div> </div> </div> <div #sec5 class="card-wrapper"> <div class="card"> <div class="container"> <h4><b>John Doe 5</b></h4> <p>Architect & Engineer</p> </div> </div> </div> </div>
Step 4 – Add Code On Component ts File
Go to src/app directory and open app.component.ts. Then add the following code into component.ts file:
import { Component } from '@angular/core'; import { Inject } from '@angular/core'; import { DOCUMENT } from '@angular/common'; import { PageScrollService } from 'ngx-page-scroll-core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { title = 'Fullpage Scrolling'; activeUIIndex = 1; constructor(private pageScrollService: PageScrollService, @Inject(DOCUMENT) private document: any) { } scrollCustomImplementation(element: HTMLElement, index) { this.pageScrollService.scroll({ document: this.document, scrollTarget: element, }); this.activeUIIndex = index; } }
Step 5 – Update CSS File
Create styles for UI elements. And update the app.component.scss
file with the following code:
.main-wrapper { text-align: center; height: 100vh; max-width: 650px; margin-left: auto; margin-right: auto; } // Card Styles .card-wrapper { height: 100%; } .card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.3s; height: 99%; margin: 5px; background: rgb(176, 218, 255); } .card:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } .card-container { padding: 2px 16px; } // Stepper Styles .step-container { width: 30px; position: fixed; top: 25%; opacity: 0.5; transition: opacity 0.3s; -webkit-transition: opacity 0.3s; } .step-container:hover { opacity: 1; } .step { padding: 10px; display: flex; flex-direction: row; justify-content: flex-start; background-color: cream; } .v-stepper { position: relative; } .step .circle { background-color: white; border: 3px solid gray; border-radius: 100%; width: 15px; height: 15px; display: inline-block; } .step .line { top: 20px; left: 9px; height: 100%; position: absolute; border-left: 3px solid gray; } .step.completed .circle { visibility: visible; background-color: gray; border-color: rgb(0, 0, 0); } .step.completed .line { border-left: 3px solid rgb(0, 0, 0); } .step.active .circle { visibility: visible; border-color: rgb(0, 0, 0); } .step.empty .circle { visibility: hidden; } .step.empty .line { top: 0; height: 150%; } .step:last-child .line { border-left: 3px solid white; z-index: -1; }
Step 6 – Start Angular App And PHP Server
Execute the following commands on terminal to start angular app:
ng serve