Hello Friends, In this article We will learn how to add the ScrollTop functionality in an angular project using primeNG.
–First of all, create a new angular app. Now open your terminal and execute the following command on it to install the angular app.
ng new scroll-top
–Then install the following package in your app
npm install primeng --save
The CSS dependencies are as follows the structural CSS of components.
–Now we need to add the CSS files of primeNG into the application at angular.json.
In the angular.json file find the styles array and add the following:
"styles": [
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/lara-light-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css"
]
Add the below code in App.Module.ts File
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ScrollTopModule } from 'primeng/scrolltop';
import { ScrollPanelModule } from 'primeng/scrollpanel';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
ScrollTopModule,
ScrollPanelModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
–Now add the below HTML code in the App.Component.html file to add toast notification.
<p-scrollPanel>
<p>
Lorem ipsum ...massa tempor nec.
</p>
<p>
Lorem ipsum ...massa tempor nec.
</p>
<p>
Lorem ipsum ...massa tempor nec.
</p>
<p>
Lorem ipsum ...massa tempor nec.
</p>
<p>
Lorem ipsum ...massa tempor nec.
</p>
<p-scrollTop
target="parent"
[threshold]="10"
icon="pi pi-arrow-up"
></p-scrollTop>
</p-scrollPanel>
Output:-
