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 will see the Angular PrimeNG Carousel Component.
The Carousel is a content slider component where an array of data is shown sequentially either manually or automatically. The Carousel in Angular PrimeNG provides great customization that can be used to create dynamic carousels.
Carousel has the following components that may be used to develop the slideshow
- basic: It is the most simple type of carousel where we put the data and it gets displayed in sliding form.
- vertical: The vertical carousel can be used by setting the orientation to vertical.
- autoplay: Setting the autoplayInterval, we can make the carousel slide automatically.
- circular: If we set circular to true, the carousel will infinitely scroll through the content by looping.
- Items Per Page: The number of items is defined by the variable numVisible which shows the number of items at once.
- Scroll Items: It is the number of items to scroll is defined with the numScroll property.
- Responsive: For a responsive design, we need to pass a set of responsiveOptions to the component where the scroll items and items per page are defined with breakpoints.
- Header and Footer: We can use the header and footer templates with the carousel to display the extra details.
- Orientation: The direction of the carousel can be changed to either vertical or horizontal by setting the orientation property. The default value is horizontal.
- Properties: There are various properties facilitated by the Angular PrimeNG Carousel, which can be utilized to make the enhanced & attractive content gallery with a better user experience.
- Templates: It is used to create different templates/designs for Carousel. It can provide headers, footers, captions, etc. to the carousel.
- Styling: The carousel component allows us to do custom styling to it using several pre-defined classes. These classes can be used for setting up headers, footers, captions, etc for the component.
- Events: The carousel component can trigger some events based on some action by the user so that data or the design can be modified accordingly and show appropriate results.
Syntax: Create a carousel as follows:
- Import the module:
import {CarouselModule} from 'primeng/carousel';- Implement it using the p-carousel:
<p-carousel [value]="items">
<ng-template let-item pTemplate="item">
<!-- Content -->
</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:
Project Structure
Example 1: In the following example, we have a simple carousel with some data.
- app.component.html
HTML
<h1 style="color: green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Carousel Component</h3>
<p-carousel [value]="tutorials">
<ng-template let-item pTemplate="item">
<h4>Tutorial: {{ item.title }}</h4>
<p-image [src]="item.image"
alt="Image" width="700px">
</p-image>
</ng-template>
</p-carousel>
|
- app.component.ts
Javascript
import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
@Component({ selector: 'app-root',
templateUrl: './app.component.html',
}) export class AppComponent { tutorials: Tutorial[];
constructor(private primengConfig: PrimeNGConfig) { }
ngOnInit() {
this.tutorials = [
{
title: 'Web MH ',
image:
},
{
title: 'Interview Experience ',
image:
},
{
title: 'GeeksforGeeks Logo ',
image:
},
{
title: 'GeeksforGeeks Carnival ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210418122505/132_00_00_Mailheader-min.png',
},
{
title: 'Python Course ',
image:
},
];
}
} 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';
@NgModule({ imports: [
BrowserModule,
BrowserAnimationsModule,
CarouselModule,
ButtonModule,
FormsModule,
ImageModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
}) export class AppModule { } |
Output:
Example 2: In the following example, we have autoplay and circular enabled.
- app.component.html
HTML
<h1 style="color: green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Carousel Component</h3>
<p-carousel [value]="tutorials"
[autoplayInterval]="1000"
[circular]="true">
<ng-template let-item pTemplate="item">
<h4>Tutorial: {{ item.title }}</h4>
<p-image [src]="item.image"
alt="Image" width="700px">
</p-image>
</ng-template>
</p-carousel>
|
- app.component.ts
Javascript
import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';
@Component({ selector: 'app-root',
templateUrl: './app.component.html',
}) export class AppComponent { tutorials: Tutorial[];
constructor(private primengConfig: PrimeNGConfig) { }
ngOnInit() {
this.tutorials = [
{
title: 'Web MH ',
image:
},
{
title: 'Interview Experience ',
image:
},
{
title: 'GeeksforGeeks Logo ',
image:
},
{
title: 'GeeksforGeeks Carnival ',
image:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210418122505/132_00_00_Mailheader-min.png',
},
{
title: 'Python Course ',
image:
},
];
}
} 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';
@NgModule({ imports: [
BrowserModule,
BrowserAnimationsModule,
CarouselModule,
ButtonModule,
FormsModule,
ImageModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
}) export class AppModule { } |
Output:
Reference: http://primefaces.org/primeng/carousel