Angular PrimeNG Galleria Navigator

Last Updated : 28 Apr, 2025

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

Galleria is an advanced component to display images in an attractive manner. Navigators are used for navigating to the other items of the galleria component. By combining the navigator with thumbnails and item indicators, we can achieve many different layouts for the galleria component.

Angular PrimeNG Galleria Navigator Properties:

showItemNavigators: This property is used to enable/disable the item navigators in the galleria component.
showItemNavigatorsOnHover: If this property is set to true, the item navigators will be shown only when we hover over the item.
numVisible: It is used to tell the number of thumbnails visible on one page.
showIndicators: This property is used to enable/disable indicators of the galleria component.
showIndicatorsOnItem: If this boolean property is set to true, the indicators will be shown inside the content.

There are a few other Navigator Templates that can be used with the Galleria, which are described below:

item: The item template is used to define the structure of a single galleria item.
thumbnail: The thumbnail template is used to define the structure of the thumbnail of a galleria item.

Syntax:

<p-galleria [value]="img" 
            [numVisible]="3" 
            [showItemNavigators]="true">
    <ng-template pTemplate="item" let-img>
        ...
    </ng-template>
    <ng-template pTemplate="thumbnail" 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 example illustrates the use of the galleria component with item navigators without thumbnails and by setting the showItemNavigatorsOnHover property to true, the navigators will be visible only when we hover over the content.

app.component.html

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Navigator</h3>

<h4>
    Item Navigator with thumbnail
    and Visible on Hover
</h4>

<p-galleria [value]="img" 
            [containerStyle]="{'max-width': '500px'}" 
            [numVisible]="3" 
            [showItemNavigators]="true"
    [showItemNavigatorsOnHover]="true">

    <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>
</p-galleria>

app.component.ts

JavaScript

import { Component } from '@angular/core';

interface GalleriaImage {
    URL: String;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    img: GalleriaImage[] = [];

    ngOnInit() {
        this.img = [
            {
                URL: 
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235505/eximg1.gif"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png"
            },
            {
                URL: 
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png"
            }
        ];
    }
}

app.module.ts

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, the showItemNavigators property is set to true to show navigators. Additionally, we set the showIndicators property to true to show indicators and showThumbnail property to false to hide the thumbnails.

app.component.html

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Navigator</h3>

<h4>
    Item Navigator without thumbnail
    and With Indicators
</h4>

<p-galleria [value]="img" 
            [containerStyle]="{'max-width': '500px'}" 
            [numVisible]="3" 
            [showIndicators]="true"
            [showIndicatorsOnItem]="true" 
            [showThumbnails]="false" 
            [showItemNavigators]="true">

    <ng-template pTemplate="item" let-img>
        <img [src]="img.URL" 
             style="width: 100%; 
                    display: block;" />
    </ng-template>
</p-galleria>

app.component.ts

JavaScript

import { Component } from '@angular/core';

interface GalleriaImage {
    URL: String;
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent {
    img: GalleriaImage[] = [];

    ngOnInit() {
        this.img = [
            {
                URL: 
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235505/eximg1.gif"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png"
            },
            {
                URL:
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png"
            },
            {
                URL: 
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png"
            },
            {
                URL: 
"https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png"
            }
        ];
    }
}

app.module.ts

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 { }