Angular PrimeNG Galleria Navigator
Last Updated :
27 Oct, 2022
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 article, we will see Angular PrimeNG Galleria Navigator.
Galleria is an advanced component to display images in an attractive manner. Navigators are used for navigating to the other items of the galleria component. By combining the navigator with thumbnails and item indicators, we can achieve many different layouts for the galleria component.
Angular PrimeNG Galleria Navigator Properties:
- showItemNavigators: This property is used to enable/disable the item navigators in the galleria component.
- showItemNavigatorsOnHover: If this property is set to true, the item navigators will be shown only when we hover over the item.
- numVisible: It is used to tell the number of thumbnails visible on one page.
- showIndicators: This property is used to enable/disable indicators of the galleria component.
- showIndicatorsOnItem: If this boolean property is set to true, the indicators will be shown inside the content.
There are a few other Navigator Templates that can be used with the Galleria, which are described below:
- item: The item template is used to define the structure of a single galleria item.
- thumbnail: The thumbnail template is used to define the structure of the thumbnail of a galleria item.
Syntax:
<p-galleria [value]="img"
[numVisible]="3"
[showItemNavigators]="true">
<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:
Project Structure
Example 1: This example illustrates the use of the galleria component with item navigators without thumbnails and by setting the showItemNavigatorsOnHover property to true, the navigators will be visible only when we hover over the content.
HTML
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Navigator</h3>
<h4>
Item Navigator with thumbnail
and Visible on Hover
</h4>
<p-galleria [value]="img"
[containerStyle]="{'max-width': '500px'}"
[numVisible]="3"
[showItemNavigators]="true"
[showItemNavigatorsOnHover]="true">
<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: 100px;
display: block;" />
</ng-template>
</p-galleria>
|
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:
},
{
URL:
},
{
URL:
},
{
URL:
},
{
URL:
}
];
}
}
|
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: In this example, the showItemNavigators property is set to true to show navigators. Additionally, we set the showIndicators property to true to show indicators and showThumbnail property to false to hide the thumbnails.
HTML
<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Navigator</h3>
<h4>
Item Navigator without thumbnail
and With Indicators
</h4>
<p-galleria [value]="img"
[containerStyle]="{'max-width': '500px'}"
[numVisible]="3"
[showIndicators]="true"
[showIndicatorsOnItem]="true"
[showThumbnails]="false"
[showItemNavigators]="true">
<ng-template pTemplate="item" let-img>
<img [src]="img.URL"
style="width: 100%;
display: block;" />
</ng-template>
</p-galleria>
|
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:
},
{
URL:
},
{
URL:
},
{
URL:
},
{
URL:
}
];
}
}
|
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: https://primefaces.org/primeng/galleria/navigator
Share your thoughts in the comments
Please Login to comment...