Angular PrimeNG ScrollTop Properties

Last Updated : 29 Sep, 2022

Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will be discussing Angular PrimeNG ScrollTop Properties.

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.

Angular PrimeNG ScrollTop Properties:

target: It defines the target of the scroll top. It accepts string values and the valid values are "window" and "parent. The default value is "window".
threshold: It defines the vertical scroll position of the target when the scroll top toggles its visibility. It accepts number values and the default value is 400.
icon: It is the icon to display in the scroll top component. It accepts string values and the default value is "pi pi-chevron-up".
behavior: It defines the scrolling behavior of the scroll top component. It accepts string values and the valid values are "smooth" and "auto". The default value is "smooth".
style: It is the inline style of the component. The default value is null.
styleClass: It is the style class of the component. The default value is null.

Syntax:

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

Creating Angular Application and Installing the Module:

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

ng new appname

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

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Example 1: In this example, we used the threshold property of the scroll top component to show the scroll to top button after 100 pixels and the target property to target the parent.

app.component.html

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

<div>
    <h3>What is Angular PrimeNG</h3>
    <p-scrollPanel 
        [style]="{width: '200px', height: '200px'}">
        <p>
            Angular PrimeNG is a collection of 
            Interactive UI components for Angular 
            applications. Developers can use these
            components to make beautiful and 
            responsive web interfaces in no time 
            as most of the components have all 
            the necessary functions implemented.

            It is a very popular UI library 
            with over 7.5k github stars, 
            3.5k+ forks and 350+ contributors. 
        </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',
    styleUrls: ['./app.component.css'],
})
export class AppComponent { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } 
from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ScrollTopModule } from 'primeng/scrolltop';
import { ScrollPanelModule } from 'primeng/scrollpanel';

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

Output:

Example 2: In this example, we used the icon property of the scroll top component to change the icon to "pi pi-arrow-up".

app.component.html

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

<div>
    <h3>What is Angular PrimeNG</h3>
    <p-scrollPanel 
        [style]="{width: '200px', height: '200px'}">
        <p>
            Angular PrimeNG is a collection of 
            Interactive UI components for Angular 
            applications. Developers can use these
            components to make beautiful and 
            responsive web interfaces in no time 
            as most of the components have all 
            the necessary functions implemented.

            It is a very popular UI library 
            with over 7.5k github stars, 
            3.5k+ forks and 350+ contributors. 
        </p>
        <p-scrollTop 
            target="parent"
            icon="pi pi-arrow-up" 
            [threshold]="100"></p-scrollTop>
    </p-scrollPanel>
</div>

app.component.ts

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

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

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } 
from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ScrollTopModule } from 'primeng/scrolltop';
import { ScrollPanelModule } from 'primeng/scrollpanel';

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