Angular PrimeNG Carousel Events
Last Updated :
13 Jan, 2023
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. In this article, we are going to learn about Angular PrimeNG Carousel Events.
The Carousel is a content slider component where an array of data is shown sequentially, manually, or automatically. The Carousel in Angular PrimeNG provides great customization that can be used to create dynamic carousels. The Carousel Events can be used to track the user interaction with the component with the help of callback function events.Â
Angular PrimeNG Carousel Events:
- onPage(event): It is the callback to invoke after scroll.
Syntax:
<p-carousel [value]="...."
(onPage)="....">
<ng-template let-item pTemplate="item">
<p-image [src]="..."
alt="..." width="...">
</p-image>
</ng-template>
</p-carousel>
Creating Angular application & Module Installation:
Step 1: Create an Angular application using the following command:
ng new geeks_angular
Step 2: Â After creating your project folder i.e. geeks_angular, move to it using the following command.
cd geeks_angular
Step 3: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: The project structure will look like the following:
Â
Steps to run the application: Run the below command to see the output
ng serve --open
Example 1: Below is the example code that illustrates the use of Angular PrimeNG Carousel Events. In the following example, we are showing a toast on pageChange
HTML
<h1 style="color: green; text-align: center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Carousel Events</h3>
<p-carousel [value]="tutorials"
(onPage)="pageChange($event)">
<ng-template let-item pTemplate="item">
<p-image [src]="item.image"
alt="Image" width="500px">
</p-image>
</ng-template>
</p-carousel>
<p-toast position="top-right"></p-toast>
|
Javascript
import { Component } from "@angular/core";
import { MessageService, PrimeNGConfig } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
providers: [MessageService]
})
export class AppComponent {
tutorials: Tutorial[];
constructor(private messageService: MessageService) {}
ngOnInit() {
this.tutorials = [
{
title: "Web MH ",
image:
},
{
title: "Interview Experience ",
image:
},
{
title: "GeeksforGeeks Logo ",
image:
},
{
title: "GeeksforGeeks Carnival ",
image:
},
{
title: "Python Course ",
image:
}
];
}
pageChange(event) {
this.messageService.add({
severity: "info",
summary: "Page Changed",
detail: "Welcome to GeeksforGeeks"
});
}
}
export interface Tutorial {
title?: String;
image?: String;
}
|
Javascript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CarouselModule } from "primeng/carousel";
import { ButtonModule } from "primeng/button";
import { ImageModule } from "primeng/image";
import { ToastModule } from "primeng/toast";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CarouselModule,
ButtonModule,
FormsModule,
ImageModule,
ToastModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
|
Output:
Â
Example 2: Below is another example code that illustrates the use of Angular PrimeNG Carousel Events. In the following example, we are going to display the page number.
HTML
<h1 style="color: green; text-align: center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Carousel Events</h3>
<p-carousel [value]="tutorials"
(onPage)="pageChange($event)">
<ng-template let-item pTemplate="item">
<p-image [src]="item.image"
alt="Image" width="500px">
</p-image>
</ng-template>
</p-carousel>
<p-toast position="top-right"></p-toast>
|
Javascript
import { Component } from "@angular/core";
import { MessageService, PrimeNGConfig } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
providers: [MessageService]
})
export class AppComponent {
tutorials: Tutorial[];
constructor(private messageService: MessageService) {}
ngOnInit() {
this.tutorials = [
{
title: "Web MH ",
image:
},
{
title: "Interview Experience ",
image:
},
{
title: "GeeksforGeeks Logo ",
image:
},
{
title: "GeeksforGeeks Carnival ",
image:
},
{
title: "Python Course ",
image:
}
];
}
pageChange(event) {
this.messageService.add({
severity: "success",
summary: `The page number is ${event.page}`,
detail: "Welcome to GeeksforGeeks"
});
}
}
export interface Tutorial {
title?: String;
image?: String;
}
|
Javascript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CarouselModule } from "primeng/carousel";
import { ButtonModule } from "primeng/button";
import { ImageModule } from "primeng/image";
import { ToastModule } from "primeng/toast";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
CarouselModule,
ButtonModule,
FormsModule,
ImageModule,
ToastModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
|
Output:
Â
Reference: http://primefaces.org/primeng/carousel
Share your thoughts in the comments
Please Login to comment...