Angular PrimeNG Galleria Responsive

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

Galleria in Angular PrimeNG is an advanced content gallery component. It is used for displaying images in an attractive manner. The Responsive 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.

Syntax:

<p-galleria [responsiveOptions]="..." 
            [numVisible]="..." 
            [value]="...">
       <ng-template pTemplate="item" let-item>
              <img [src]="..." />
       </ng-template>
       <ng-template pTemplate="thumbnail" let-item>
              <div class="grid grid-nogutter 
                          justify-content-center">
                     <img [src]="..." />
              </div>
       </ng-template>
</p-galleria>

The syntax for making responsive options:

responsiveOptions:any[] = [
   
     {
         breakpoint: '...',
         numVisible: *
     }
]

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 Responsive in Angular PrimeNG. We will make some responsiveOptions that will be passed to the Galleria component. Only 1 breakpoint is added in this example. We will see, when the screen is large, 3 thumbnails will be visible, and when the screen size varies, the number of thumbnails varies as per responsiveoptions.

app.component.html:

HTML

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

       <div>
              <p-galleria [value]="images" 
                          [numVisible]="3" 
                          [responsiveOptions]="responsiveOptions">
                     <ng-template pTemplate="item" let-item>
                            <img [src]="item.previewImageSrc" 
                                 style="width: 50%;" />
                     </ng-template>
                     <ng-template pTemplate="thumbnail" let-item>
                            <div class="grid grid-nogutter 
                                        justify-content-center">
                                   <img [src]="item.thumbnailImageSrc" 
                                         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'
        },
    ];
    responsiveOptions: any[] = [
        {
            breakpoint: '768px',
            numVisible: 2
        },
    ];
}

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: In this example, we will make some more responsiveOptions that will be passed to the Galleria component. Here, we have added the Multiple breakpoints.

app.component.html:

HTML

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

       <div>
              <p-galleria [value]="images" 
                          [numVisible]="3" 
                          [responsiveOptions]="responsiveOptions">
                     <ng-template pTemplate="item" let-item>
                            <img [src]="item.previewImageSrc" 
                                 style="width: 50%;" />
                     </ng-template>
                     <ng-template pTemplate="thumbnail" let-item>
                            <div class="grid grid-nogutter
                                        justify-content-center">
                                   <img [src]="item.thumbnailImageSrc" 
                                         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'
        },
    ];
    responsiveOptions: any[] = [
        {
            breakpoint: '768px',
            numVisible: 2
        },

        {
            breakpoint: '560px',
            numVisible: 1
        }
    ];
}

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