Angular PrimeNG Galleria Caption
Last Updated :
16 Oct, 2022
Angular PrimeNG is an open-source UI component library for Angular Applications. Using the components provided by Angular PrimeNG, one can create stunning and responsive angular applications. In this post, we will see Angular PrimeNG Galleria Caption.
Galleria is an advanced component to display images in an attractive manner. The caption is used to display additional content for an item of the galleria component. The caption of an item consists of the tile and the description.
Angular PrimeNG Galleria Caption Properties:
- value: This property accepts an array of objects to display as galleria items. The default value is null.
- showThumbnail: This property is used to specify whether to show the galleria thumbnails.
- autoplay: This is a boolean property which when enabled set the autoplay mode of the galleria component to true.
- circular: This is a boolean property that enables users to scroll the galleria items infinitely.
- transitionInterval: This property accepts number value which is the number of microseconds for which an item will be shown in autoplay mode.
Angular PrimeNG Galleria Caption Templates:
- item: This template is used to define how a single item will be structured in the galleria component.
- thumbnail: This template is used to define how an item’s thumbnail will be structured in the galleria component.
- caption: This template structures the caption of the item in the galleria component.
Syntax:
<p-galleria
[value]="img"
[containerStyle]="{'max-width': '500px'}">
<ng-template pTemplate="item" let-img>
...
</ng-template>
<ng-template pTemplate="caption" let-img>
...
</ng-template>
</p-galleria>
Creating Angular application and Installing the Modules:
Step 1: Create an Angular application using the following command.
ng new myapp
Step 2: After creating your project folder i.e. myapp, move to it using the following command.
cd myapp
Step 3: Install PrimeNG in your given directory.
npm install primeng --save
npm install primeicons --save
Project Structure: After completing the above steps, the structure will look like the following.
Example 1: This is a basic example illustrating the use of the galleria caption.
HTML
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Caption</h3>
<p-galleria
[value]="img"
[containerStyle]="{'max-width': '500px'}" >
<ng-template pTemplate="item" let-img>
<img
[src]="img.URL"
style="width: 100%; display: block;" />
</ng-template>
<ng-template pTemplate="thumbnail" let-img>
<img
[src]="img.URL"
style="width: 100px; display: block;" />
</ng-template>
<ng-template pTemplate="caption" let-img>
<h4
style="color: #ffffff; margin-bottom: 0;">
{{img.title}}
</h4>
<p style="margin-top: 0;">{{img.description}}</p>
</ng-template>
</p-galleria>
|
Javascript
import { Component } from '@angular/core';
interface GalleriaImage{
URL: String,
title: String,
description: String
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
img: GalleriaImage[] = [];
ngOnInit()
{
this.img = [
{
URL:
title: "Cracking the Coding Interview",
description: "Step up your interview preparation"
},
{
URL:
title: "Interview Series #70",
description: "Join at 7:00 PM "
},
{
URL:
title: "Interview Series #68",
description: "Join at 7:00 PM "
},
{
URL:
title: "Interview Series #66",
description: "Join at 7:00 PM "
},
{
URL:
title: "Interview Series #65",
description: "Join at 7:00 PM "
}
];
}
}
|
Javascript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { GalleriaModule } from 'primeng/galleria';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
GalleriaModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
|
Output:
Example 2: In this example, we used the galleria captions without thumbnails and with autoplay
HTML
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Caption</h3>
<p-galleria
[value]="img"
[containerStyle]="{'max-width': '500px'}"
[showThumbnails]="false"
[autoPlay]="true"
[circular]="true"
[transitionInterval]="1500">
<ng-template pTemplate="item" let-img>
<img
[src]="img.URL"
style="width: 100%; display: block;" />
</ng-template>
<ng-template pTemplate="caption" let-img>
<h4
style="color: #ffffff; margin-bottom: 0;">
{{img.title}}
</h4>
<p style="margin-top: 0;">{{img.description}}</p>
</ng-template>
</p-galleria>
|
Javascript
import { Component } from '@angular/core';
interface GalleriaImage{
URL: String,
title: String,
description: String
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
img: GalleriaImage[] = [];
ngOnInit()
{
this.img = [
{
URL:
title: "Cracking the Coding Interview",
description: "Step up your interview preparation"
},
{
URL:
title: "Interview Series #70",
description: "Join at 7:00 PM "
},
{
URL:
title: "Interview Series #68",
description: "Join at 7:00 PM "
},
{
URL:
title: "Interview Series #66",
description: "Join at 7:00 PM "
},
{
URL:
title: "Interview Series #65",
description: "Join at 7:00 PM "
}
];
}
}
|
Javascript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { GalleriaModule } from 'primeng/galleria';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
GalleriaModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
|
Output:
Reference: http://primefaces.org/primeng/galleria/caption
Share your thoughts in the comments
Please Login to comment...