Angular PrimeNG Carousel Events

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 Beginner_angular

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

cd Beginner_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

app.component.html:

HTML

<h1 style="color: green; text-align: center;"> 
      w3wiki 
</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>

app.component.ts:

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: 
"https://media.w3wiki.net/wp-content/cdn-uploads/20210420155051/WebMH.png"
            }, 
            { 
                title: "Interview Experience ", 
                image: 
"https://media.w3wiki.net/wp-content/cdn-uploads/20210420112859/IntExp.png"
            }, 
            { 
                title: "w3wiki Logo ", 
                image: 
"https://media.w3wiki.net/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png"
            }, 
            { 
                title: "w3wiki Carnival ", 
                image: 
"https://media.w3wiki.net/wp-content/cdn-uploads/20210418122505/132_00_00_Mailheader-min.png"
            }, 
            { 
                title: "Python Course ", 
                image: 
"https://media.w3wiki.net/wp-content/cdn-uploads/20211028203138/w3wiki-Python-Foundation-Course-Learn-Python-from-Scratch-in-Hindi.png"
            } 
        ]; 
    } 
    pageChange(event) { 
        this.messageService.add({ 
            severity: "info", 
            summary: "Page Changed", 
            detail: "Welcome to w3wiki"
        }); 
    } 
} 
export interface Tutorial { 
    title?: String; 
    image?: String; 
}

app.module.ts:

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.

app.component.html:

HTML

<h1 style="color: green; text-align: center;"> 
      w3wiki 
</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>

app.component.ts:

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: 
"https://media.w3wiki.net/wp-content/cdn-uploads/20210420155051/WebMH.png"
            }, 
            { 
                title: "Interview Experience ", 
                image: 
"https://media.w3wiki.net/wp-content/cdn-uploads/20210420112859/IntExp.png"
            }, 
            { 
                title: "w3wiki Logo ", 
                image: 
"https://media.w3wiki.net/wp-content/cdn-uploads/20210419113249/gfg-new-logo-min.png"
            }, 
            { 
                title: "w3wiki Carnival ", 
                image: 
"https://media.w3wiki.net/wp-content/cdn-uploads/20210418122505/132_00_00_Mailheader-min.png"
            }, 
            { 
                title: "Python Course ", 
                image: 
"https://media.w3wiki.net/wp-content/cdn-uploads/20211028203138/w3wiki-Python-Foundation-Course-Learn-Python-from-Scratch-in-Hindi.png"
            } 
        ]; 
    } 
    pageChange(event) { 
        this.messageService.add({ 
            severity: "success", 
            summary: `The page number is ${event.page}`, 
            detail: "Welcome to w3wiki"
        }); 
    } 
} 
export interface Tutorial { 
    title?: String; 
    image?: String; 
}

app.module.ts:

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

HTML

Javascript

Javascript

HTML

Javascript

Javascript

Contact Us