Angular PrimeNG ScrollTop Window

Angular PrimeNG is a UI component catalog for angular applications. It consists of a wide range of UI components that help in making fast and scalable websites. In this article, we will see ScrollTop Window in Angular PrimeNG.

The ScrollTop Component is displayed after the user has scrolled up to a certain scroll position and is used to go to the top of the page quickly. ScrollTop Window is applied to the full page & is used to scroll down the page, in order to display the ScrollTop component.

Syntax:

<p-scrollTop icon="..." [threshold]="..."></p-scrollTop>

Creating Angular application & module installation:

Step 1: Create an Angular application using the below command.

ng new newapp

Step 2: After creating your project folder i.e. newapp, move to it using the below command:

cd newapp

Step 3: Install PrimeNG and PrimeIcons in your project directory.

npm install primeng --save
npm install primeicons --save

Project Structure: After complete installation, the project structure will look like the following:

Project Structure

Example 1: This is the basic example that illustrates how to use the scrollTop component listening to the window scroll.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG ScrollTop Window</h3>

<div style="font-size: 20px;">
    <h2> About GeeksforGeeks </h2>
    <p>
        GeeksforGeeks is a computer
        science portal for geeks.
        It offers thousands of written
        articles on various computer science
        topics. Some of the topics are
        listed below:
    </p>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Php</li>
        <li>Bootstrap</li>
        <li>NodeJS</li>
        <li>ReactJS</li>
        <li>AngularJS</li>
        <li>ExpressJS</li>
        <li>Tailwind</li>
        <li>Bulma</li>
        <li>Foundation</li>
        <li>React Desktop</li>
        <li>jQuery UI</li>
        <li>jQuery Mobile</li>
        <li>Typescript</li>
        <li>p5.js</li>
        <li>Tensorflow.js</li>
        <li>Python</li>
        <li>C/C++</li>
        <li>C/C++</li>
        <li>DSA</li>
        <li>Java</li>
        <li>Ruby</li>
        <li>Machine Learning</li>
        <li>Database Management System</li>
        <li>Compiler Design</li>
    </ul>
</div>

<!-- ScrollTop Element targeting window by default -->
<p-scrollTop></p-scrollTop>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent { }

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { ScrollTopModule } from 'primeng/scrolltop';
import { ScrollPanelModule } from 'primeng/scrollpanel';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ScrollTopModule,
        ScrollPanelModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: This is another example of the scroll top window, where we changed the icon and threshold for the scroll top component.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG ScrollTop Window</h3>

<div style="font-size: 20px;">
    <h2> About GeeksforGeeks </h2>
    <p>
        GeeksforGeeks is a computer
        science portal for geeks.
        It offers thousands of written
        articles on various computer science
        topics. Some of the topics are
        listed below:
    </p>

    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Php</li>
        <li>Bootstrap</li>
        <li>NodeJS</li>
        <li>ReactJS</li>
        <li>AngularJS</li>
        <li>ExpressJS</li>
        <li>Tailwind</li>
        <li>Bulma</li>
        <li>Foundation</li>
        <li>React Desktop</li>
        <li>jQuery UI</li>
        <li>jQuery Mobile</li>
        <li>Typescript</li>
        <li>p5.js</li>
        <li>Tensorflow.js</li>
        <li>Python</li>
        <li>C/C++</li>
        <li>C/C++</li>
        <li>DSA</li>
        <li>Java</li>
        <li>Ruby</li>
        <li>Machine Learning</li>
        <li>Database Management System</li>
        <li>Compiler Design</li>
    </ul>
</div>

<!-- ScrollTop Element targeting window by default -->
<p-scrollTop icon="pi pi-angle-double-up"
             [threshold]="100">
</p-scrollTop>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent { }

app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { ScrollTopModule } from 'primeng/scrolltop';
import { ScrollPanelModule } from 'primeng/scrollpanel';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ScrollTopModule,
        ScrollPanelModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/scrolltop