Angular PrimeNG ScrollPanel Properties
Last Updated :
28 Apr, 2025
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use ScrollPanel Properties in Angular PrimeNG.
The ScrollPanel Component is a lightweight, cross-browser replacement to the built-in browser scrollbar.
Angular PrimeNG ScrollPanel Component Properties:
- style: It is the inline style of the component. It is of string data type & the default value is null.
- styleClass: It is the style class of the component. It is of string data type & the default value is null.
Creating Angular application & module installation:
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: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: It will look like the following:
Steps to run the above file: Run the below command to see the output
ng serve --save
Example 1: This basic example illustrates how to use the Angular PrimeNG ScrollPanel Properties using the vertical scrolling property.
HTML
<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG ScrollPanel Vertical Scrolling Property</h5>
<p-scrollPanel [style]="{ height: '300px' }">
<p>
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
</p>
</p-scrollPanel>
import { Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ScrollPanelModule } from 'primeng/scrollpanel';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ScrollPanelModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Output:
Angular PrimeNG ScrollPanel Properties
Example 2: This is another basic example illustrating how to use the Angular PrimeNG ScrollPanel Properties using horizontal scrolling property.
HTML
<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG ScrollPanel Properties</h5>
<p-scrollPanel [style]="{ height: '300px' }">
<p style="width: 500px">
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
GeeksforGeeks,
It is a Computer Science Portal for all the geeks.
</p>
</p-scrollPanel>
import { Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { ScrollPanelModule } from 'primeng/scrollpanel';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ScrollPanelModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Output:
Angular PrimeNG ScrollPanel Properties
Reference: https://primefaces.org/primeng/scrollpanel
Similar Reads
Angular PrimeNG ScrollTop Properties 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
4 min read
Angular PrimeNG Tree Properties Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
6 min read
Angular PrimeNG Table Properties Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
12 min read
Angular PrimeNG Tooltip Properties Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Tooltip properties along with code examples in Angular P
5 min read
Angular PrimeNG Splitter Properties Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use Splitter Properties in Angular PrimeNG. The Splitter Compone
4 min read
Angular PrimeNG TreeTable Properties Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more.
10 min read
Angular PrimeNG Sidebar Properties Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will learn how to use the Sidebar Properties in Angular PrimeNG. The Sidebar Com
5 min read
Angular PrimeNG Slide Menu Properties Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use SlideMenu Properties in Angular PrimeNG. We will also learn
5 min read
Angular PrimeNG Table VirtualScroller Properties Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use Angular PrimeNG Properties. VirtualScroller: By displaying
7 min read
Angular PrimeNG Form Slider Properties 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
4 min read