Angular PrimeNG Galleria Documentaion

Last Updated : 28 Apr, 2025

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. In this article, we will see Angular PrimeNG Galleria Component.

The Galleria in Angular PrimeNG is an advanced content gallery component & can be used for displaying images in an attractive manner.

Import: In order to use the Galleria, we need to import the following statement in the module file:

import {GalleriaModule} from 'primeng/galleria';

Syntax:

<p-galleria [value]="images">
       <ng-template pTemplate="item" let-item>
              <img [src]="item.previewImageSrc" 
                   [alt]="item.alt" />
       </ng-template>
</p-galleria>

Galleria has the following components that help to develop the content gallery:

Items per page: The number of items per page is defined using the numVisible property.
Responsive: This is used to set the number of images visible in the thumbnails based on the screen size. We need to pass responsiveOptions in the galleria.
Templates: It is used to create different templates/designs for Galleria. It can provide headers, footers, captions, and indicators to Galleria.
Header and Footer: Galleria component allows us to do a custom header and footer properties. The Header is used to set some text/property at the top of Galleria while the Footer is used for setting text/property at the bottom of Galleria.
Galleria Indicators: Indicators allow quick navigation between the items. Set showIndicators property to true to display indicators. It can be customized further with the changeItemOnIndicatorHover, showIndicatorsOnItem, and indicatorsPosition properties.
Styling: Galleria 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 Galleria component.
Properties: There are various properties facilitated by the Angular PrimeNG Galleria, which can be utilized to make the enhanced & attractive content gallery with a better user experience.

Creating Angular application & module installation:

Install the Angular CLI

npm install - g @angular/cli

Create an Angular application using the following command.

ng new appname

After creating your project folder i.e. appname, move to it using the following command.

cd appname

Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project structure will look like the following image:

Example 1: This example describes the Galleria header, footer, and indicator in Angular PrimeNG.

app.component.html:

HTML

<div id="GFG">
       <h1 style="color:green">GeeksforGeeks</h1>
       <h2>Angular PrimeNG Galleria Documentation</h2>
       <div style="background-color: black;
                   width:50%;
                   display:block">
              <p-galleria [value]="images" 
                          [showThumbnails]="false" 
                          [showIndicators]="true" 
                          [circular]="true">
                     <ng-template pTemplate="header">
                            <h1 style="color:white;
                                       text-align: center;">
                                   GeeksforGeeks
                            </h1>
                     </ng-template>
                     <ng-template pTemplate="item" let-item>
                            <img [src]="item.previewImageSrc" 
                                 style="width: 50%;
                                        display:block" />
                     </ng-template>
                     <ng-template pTemplate="thumbnail" let-item>
                            <div class="grid grid-nogutter 
                                        justify-content-center">
                                   <img [src]="item.thumbnailImageSrc" 
                                         style="width: 80%" />
                            </div>
                     </ng-template>
                     <ng-template pTemplate="footer">
                            <h1 style="color:white;
                                       text-align: center;">
                                      Angular Footer
                            </h1>
                     </ng-template>
              </p-galleria>
       </div>
</div>

app.component.ts:

JavaScript

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    title = 'GFG';
    images: any[] = [
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            alt: 'Cascading Style Sheet',
            title: 'CSS',
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            alt: 'Angular for Front end',
            title: 'Angular',
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            alt: 'Java Programming Language',
            title: 'Java',
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            alt: 'HyperText Markup Language',
            title: 'HTML',
        },
    ];
}

app.module.ts

JavaScript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GalleriaModule } from 'primeng/galleria';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, GalleriaModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: This example describes the Galleria Documentation in Angular PrimeNG by utilizing the Galleria header, and captions.

app.component.html:

HTML

<div id="GFG">
       <h1 style="color:green">GeeksforGeeks</h1>
       <h2>Angular PrimeNG Galleria Documentation</h2>
       <div style="background-color: black;
                   width:50%;
                   display:block">
              <p-galleria [value]="images" 
                          [circular]="true">
                     <ng-template pTemplate="header">
                            <h1 style="color:white;
                                       text-align: center;">
                                       Angular Header
                            </h1>
                     </ng-template>
                     <ng-template pTemplate="item" let-item>
                            <img [src]="item.previewImageSrc" 
                                  style="width: 100%;
                                         display:block" />
                     </ng-template>
                     <br /><br />
                     <ng-template pTemplate="caption" let-item>
                            <h4 style="color: #ffffff;">
                                   {{ item.title }}
                            </h4>
                            <p>{{ item.alt }}</p>
                     </ng-template>
                     <ng-template pTemplate="thumbnail" let-item>
                            <div class="grid grid-nogutter 
                                        justify-content-center">
                                   <img [src]="item.thumbnailImageSrc" 
                                         style="width: 80%" />
                            </div>
                     </ng-template>
              </p-galleria>
       </div>
</div>

app.component.ts:

JavaScript

import { Component } from '@angular/core';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    title = 'GFG';
    images: any[] = [
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            alt: 'Cascading Style Sheet',
            title: 'CSS',
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            alt: 'Angular for Front end',
            title: 'Angular',
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            alt: 'Java Programming Language',
            title: 'Java',
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            alt: 'HyperText Markup Language',
            title: 'HTML',
        },
    ];
}

app.module.ts

JavaScript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GalleriaModule } from 'primeng/galleria';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, GalleriaModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule { }