Angular PrimeNG Galleria Thumbnail

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 Thumbnail.

Galleria is an advanced component to display images in an attractive manner. It needs a template named item and an array of objects as the value. The use of the galleria component betters the user experience of the application. Thumbnails represent the minified preview of galleria items. Thumbnails in the galleria component can be positioned at the top, bottom, left, or right and are enabled by default.

Angular PrimeNG Galleria Thumbnail Properties:

• value: The value property of the galleria is used to provide an array of objects to display as items. The default value is null.
• showItemNavigators: This property is used to enable/disable the visibility of the item indicators.
• showThumbnails: This property is used to define if the thumbnails should be shown.
• numVisible: This property is used to set the number of thumbnails visible at once.
• thumbnailsPosition: This property is used to set the position of the thumbnail of the galleria component. The accepted values are “bottom”, “top”, left” and “right”.

Syntax:

<p-galleria 
    [value]="img"  
    [numVisible]="3">

    <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: The thumbnails can be disabled by setting the showThumbnails property to false. This example shows a galleria component with no thumbnails.

• app.component.html:

HTML

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

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

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

Output:

Example 2: This example uses the thumbnailsPosition property of the galleria component to set the position of the thumbnails to the top.

• app.component.html:

HTML

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

<div class="flex gap-4">
    <div>
        <h3>Thumbnails at Top</h3>
        <p-galleria
            [value]="img"
            [showItemNavigators]="true"
            thumbnailsPosition="top"
            [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: 80%; display: block;"
                />
            </ng-template>
        </p-galleria>
    </div>
    <div>
        <h3>Thumbnails at Bottom</h3>
        <p-galleria
            [value]="img"
            [showItemNavigators]="true"
            thumbnailsPosition="bottom"
            [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: 80%; display: block;"
                />
            </ng-template>
        </p-galleria>
    </div>
</div>

• 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 3: This is another example showing the thumbnail positions of the galleria component. It shows the galleria having thumbnails on the right side.

• app.component.html:

HTML

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

<div>
    <h3>Thumbnails on Right</h3>
    <p-galleria
        [value]="img"
        [verticalThumbnailViewPortHeight]="'250px'"
        [numVisible]="3"
        [showItemNavigators]="true"
        thumbnailsPosition="right"
    style="height: 300px;">

        <ng-template pTemplate="item" let-img>
            <img
                [src]="img.URL"
                style="display: block; height: 400px"
                width="400px" />
        </ng-template>

        <ng-template pTemplate="thumbnail" let-img>
            <div class="grid grid-nogutter
                        justify-content-center">
            <img [src]="img.URL" height="70px"/>
        </div>
        </ng-template>
    </p-galleria>
</div>

• 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:

Reference: http://primefaces.org/primeng/galleria/thumbnail