Angular PrimeNG Galleria Responsive
Last Updated :
27 Oct, 2022
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:
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.
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>
|
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:
thumbnailImageSrc:
alt: 'Description for Image 1',
title: 'Title 1'
},
{
previewImageSrc:
thumbnailImageSrc:
alt: 'Description for Image 2',
title: 'Title 2'
},
{
previewImageSrc:
alt: 'Description for Image 3',
title: 'Title 3'
},
{
previewImageSrc:
thumbnailImageSrc:
alt: 'Description for Image 4',
title: 'Title 4'
},
];
responsiveOptions: any[] = [
{
breakpoint: '768px',
numVisible: 2
},
];
}
|
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.
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>
|
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:
thumbnailImageSrc:
alt: 'Description for Image 1',
title: 'Title 1'
},
{
previewImageSrc:
thumbnailImageSrc:
alt: 'Description for Image 2',
title: 'Title 2'
},
{
previewImageSrc:
thumbnailImageSrc:
alt: 'Description for Image 3',
title: 'Title 3'
},
{
previewImageSrc:
thumbnailImageSrc:
alt: 'Description for Image 4',
title: 'Title 4'
},
];
responsiveOptions: any[] = [
{
breakpoint: '768px',
numVisible: 2
},
{
breakpoint: '560px',
numVisible: 1
}
];
}
|
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:
Reference: http://primefaces.org/primeng/galleria/responsive
Share your thoughts in the comments
Please Login to comment...