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:
<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:
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
},
];
} |
- app.module.ts:
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:
<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:
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
}
];
} |
- app.module.ts
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