Angular 11 Full Page Scrolling Web App Tutorial Example

In this step by step tutorial, you will learn how to build full page scrolling in the angular 11 app with the help of the ngx-page scroll library.

The ngx page scroll is an impeccable animated scrolling library especially developed in typescript for the angular framework. Moreover, it doesn’t contain any third-party dependencies. It comes with powerful features and some of the features we are using in this Angular 11 full age scrolling tutorial.

For instance, you can use a flexible feature, which helps call the scroll animation after the component gets loaded or even after it receives the response from the server. You get a pageScroll directive, which is easy to use, highly customizable (mange duration, offset, etc.); most importantly, it comes with custom easing functions to create animated scrolling in angular.

How to Create Full Scrolling in Angular 11 App

  • Step 1: Configure Angular Environment
  • Step 2: Install NGX Page Scroll Package
  • Step 3: Add Page Scroll Module
  • Step 4: Implement Full Page Scrolling in Angular
  • Step 5: Add Custom Styling
  • Step 6: Start Angular App

Configure Angular Environment

Angular CLI is required tool for creating and updating the angular app, hence install it with given command:

npm install -g @angular/cli

Next, you can install the angular app with ng new command followed by your project name:

ng new angular-full-page-scroll-website

Make sure to get into the project:

cd angular-full-page-scroll-website

Install NGX Page Scroll Package

In this step, you will install the ngx page scroll core package using the NPM command, hence execute the following command:

npm install ngx-page-scroll-core

Add Page Scroll Module

Now, the plugin has been added to angular, next import the NgxPageScrollCoreModule from the ‘ngx-page-scroll-core’ package, plus insert it inside the imports array with forRoot() method, within this method pass the duration which will be the scrolling animation time for the page scroll.

Add the code in app.module.ts file:

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

export class AppModule { }

Implement Full Page Scrolling in Angular

In this step, you have to create an HTML layout, primarily create 5 panels, and these panels will scroll with animation to the numeric bullet we click on.

Next, open app.component.html file, likewise update with the suggested code:

<div class="main-wrapper">
  <div class="scroll-block">
    <div class="step" [ngClass]="{'active': active === 1}" pageScroll
      (click)="onScroll(panel1, 1)">
      <div class="round-wrap">
        <div class="circle"></div>
      </div>
    </div>
    <div class="step" [ngClass]="{'active': active === 2}" pageScroll
      (click)="onScroll(panel2, 2)">
      <div class="round-wrap">
        <div class="circle"></div>
      </div>
    </div>
    <div class="step" [ngClass]="{'active': active === 3}" pageScroll
      (click)="onScroll(panel3, 3)">
      <div class="round-wrap">
        <div class="circle"></div>
      </div>
    </div>
    <div class="step" [ngClass]="{'active': active === 4}" pageScroll
      (click)="onScroll(panel4, 4)">
      <div class="round-wrap">
        <div class="circle"></div>
      </div>
    </div>
    <div class="step" [ngClass]="{'active': active === 5}" pageScroll
      (click)="onScroll(panel5, 5)">
      <div class="round-wrap">
        <div class="circle"></div>
      </div>
    </div>
  </div>

  <div #panel1 class="scroll-card">
    <div class="card-inner">
      <h2>Panel 1</h2>
    </div>
  </div>
  <div #panel2 class="scroll-card">
    <div class="card-inner">
      <h2>Panel 2</h2>
    </div>
  </div>
  <div #panel3 class="scroll-card">
    <div class="card-inner">
      <h2>Panel 3</h2>
    </div>
  </div>
  <div #panel4 class="scroll-card">
    <div class="card-inner">
      <h2>Panel 4</h2>
    </div>
  </div>
  <div #panel5 class="scroll-card">
    <div class="card-inner">
      <h2>Panel 5</h2>
    </div>
  </div>
</div>

Then, open app.component.ts file, and update with the suggested code:

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 {
  active = 1;

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

  onScroll(event: HTMLElement, i) {
    this.pageScrollServ.scroll({
      scrollTarget: event,
      document: this.document
    });

    this.active = i;
  }
}

Import Inject, Document, and PageScrollService modules, also inject these packages in the constructor method. These modules allow us to create a custom page scroll method, also set the active section to 1 initially.

Add Custom Styling

Let us style the angular page scroll component using the custom style. so further, open app.component.scss file, similarly update with the suggested code:

body, html {
  margin: 0;
  padding: 0;
}

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

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

.scroll-card {
  height: 100%;
  margin-bottom: 5px;
}

.card-inner {
  height: 100%;
  background: #f071ca;
}

.card-inner h2 {
  padding: 30px;
}

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

.round-wrap {
  position: relative;
}

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

.step .circle {
  width: 13px;
  height: 13px;
  display: inline-block;
  background-color: #ffffff;
  border: 5px solid rgb(55, 0, 255);
  border-radius: 100%;
}

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

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

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

Start Angular App

In this final step, we might test the app we have created. Thereupon, open the terminal, type the serve command and start the app:

ng serve

After executing the above command, you will see the following url on the terminal screen. Run this url on the browser to test the app:

http://localhost:4200

Conclusion

Eventually, we have completed all the steps and learned how to build the full page scrolling in angular using the third-party package. I reckon this tutorial will surely help you in developing an Animated fullscreen scrolling angular website.