Angular PrimeNG ScrollTop Element

Last Updated : 17 Jan, 2023

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 the ScrollTop Element 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 or element quickly. The target property of the scroll top component can be used to target an element so that the ScrollTop component will listen to the scroll of that element.

Angular PrimeNG ScrollTop Element Properties:

target: It is used to specify the target of the scroll top component. It accepts two values “window” and “parent”, the default value is “parent”.
threshold: This property is used to specify the scroll position in pixels when the scroll top button will appear. It accepts numerical values and the default value is 400.
icon: This property is used to specify the icon for the scroll top component. It is of type string and the default value is “pi pi-chevron-up “.

Syntax:

<p-scrollPanel [style]="...">
    ...
    <p-scrollTop target="parent"
                 [threshold]="...">
       </p-scrollTop>
</p-scrollPanel>

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 to listen to the element scroll in Angular PrimeNG.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1> 
<h3>Angular PrimeNG ScrollTop Element</h3> 
  
<div style="font-size: 20px"> 
  
    <h2> About GeeksforGeeks </h2> 
    <p-scrollPanel [style]="{width: '200px', 
                             height: '200px'}"> 
        <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 
            DSA, C++, C, Java, etc. 
        </p> 
  
        <p> 
            The practice portal of GeeksforGeeks can 
            be used to practice DSA problems. 
            There is a Problem of the Day which helps 
            you maintain the consistency to solve problems. 
        </p> 
        <p-scrollTop target="parent"
                     [threshold]="100"> 
        </p-scrollTop> 
    </p-scrollPanel> 
</div>

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: Here, we changed the icon of the scroll top component to pi-angle-double-up in Angular PrimeNG.

app.component.html

<h1 style="color:green">GeeksforGeeks</h1> 
<h3>Angular PrimeNG ScrollTop Element</h3> 
  
<div style="font-size: 20px"> 
    <h2> About GeeksforGeeks </h2> 
    <p-scrollPanel [style]="{width: '200px', 
                             height: '200px'}"> 
        <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 
            DSA, C++, C, Java, etc. 
        </p> 
  
        <p> 
            The practice portal of GeeksforGeeks can 
            be used to practice DSA problems. 
            There is a Problem of the Day which helps 
            you maintain the consistency to solve problems. 
        </p> 
        <p-scrollTop target="parent" 
                     [threshold]="100"  
                     icon="pi pi-angle-double-up"> 
        </p-scrollTop> 
    </p-scrollPanel> 
</div>

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 {}