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:
Project Structure
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 { }
|
Output:
Reference: https://primefaces.org/primeng/scrolltop
Share your thoughts in the comments
Please Login to comment...