Angular PrimeNG Galleria Items per page
Last Updated :
08 Nov, 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 be seeing Angular PrimeNG Galleria Component.
Angular PrimeNG Galleria is an advanced content gallery component. It is used for displaying images in an attractive manner. Let us learn about this using some examples.
Angular PrimeNG Galleria Items per page: The number of items per page is defined using the numVisible property. It is of type number and the default value is 3.
Syntax:
<p-galleria [numVisible]="*">
<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: In this example, we will fetch the images using URL and display them in the galleria component and will set numVisible=2.
app.component.html:
HTML
<div id="GFG">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Items per page</h2>
<div style="background-color: black;
width:50%;display:block">
<p-galleria [value]="images" [numVisible]="2">
<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" 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:
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'
},
];
}
|
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 fetch the images using URL and display them in the galleria component and will set numVisible=3.
app.component.html:
HTML
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Items per page</h2>
<div style="background-color: black;
width: 50%; display: block">
<p-galleria [value]="images" [numVisible]="3">
<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" 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:
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'
},
];
}
|
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
Reference: http://primefaces.org/primeng/galleria
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...