Angular PrimeNG Galleria Programmatic

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 the Angular PrimeNG Galleria Programmatic.

The Galleria is an advanced content gallery component. It is used for displaying images in an attractive manner. The Galleria Programmatic can be utilized to control programmatically using the activeIndex property.

Syntax:

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

Creating Angular application & module installation:

Step 1: Install the Angular CLI

npm install - g @angular/cli

Step 2: Create an Angular application using the following command.

ng new appname

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

cd appname

Step 4: 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 demonstrates the basic usage of the Galleria Programmatic in Angular PrimeNG. Here, we will fetch the images using the URL and change them programmatically using the plus and minus buttons.

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Galleria Programmatic</h2>

    <div>
        <button (click)="next()">Plus</button>
        <button (click)="prev()">Minus</button>
    </div>
    <br><br>
    <div style="background-color: black;
                width:50%;
                display:block">
        <p-galleria [value]="images" 
                    [activeIndex]="activeIndex" 
                    [numVisible]="1" 
                    [showThumbnails]="false">
            <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>
        </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: 'Description for Image 1',
            title: 'Title 1'
        },
        {
            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: 'Description for Image 2',
            title: 'Title 2'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            alt: 'Description for Image 3',
            title: 'Title 3'
        },
        {
            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: 'Description for Image 4',
            title: 'Title 4'
        },

    ];

    get activeIndex(): number {
        return this._activeIndex;
    }

    set activeIndex(newValue) {
        if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {
            this._activeIndex = newValue;
        }
    }

    _activeIndex: number = 2;
    next() {
        this.activeIndex++;
    }

    prev() {
        this.activeIndex--;
    }
}

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 is another example that demonstrates the usage of the Galleria Programmatic in Angular PrimeNG. Here, we will programmatically change images and show thumbnails

app.component.html

HTML

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Galleria Programmatic</h2>

    <div>
        <button (click)="next()">Plus</button>
        <button (click)="prev()">Minus</button>
    </div>
    <br><br>
    <div style="background-color: black;
                width:50%;
                display:block">
        <p-galleria [value]="images" 
                    [activeIndex]="activeIndex">
            <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>
        </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: 'Description for Image 1',
            title: 'Title 1'
        },
        {
            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: 'Description for Image 2',
            title: 'Title 2'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            alt: 'Description for Image 3',
            title: 'Title 3'
        },
        {
            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: 'Description for Image 4',
            title: 'Title 4'
        },

    ];

    get activeIndex(): number {
        return this._activeIndex;
    }

    set activeIndex(newValue) {
        if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {
            this._activeIndex = newValue;
        }
    }

    _activeIndex: number = 2;
    next() {
        this.activeIndex++;
    }

    prev() {
        this.activeIndex--;
    }
}

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