Full Page Scroll in Angular 12 App

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 adding pageScroll 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

Recommended Angular Tutorial

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *