Angular PrimeNG Galleria Indicators
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 Indicators.
The Galleria in Angular PrimeNG is an advanced content gallery component. It is used for displaying images in an attractive manner. Indicators allow quick navigation between the items. Set showIndicators to true to display indicators. It can be customized further with the changeItemOnIndicatorHover, showIndicatorsOnItem, & indicatorsPosition properties.
Syntax:
<p-galleria [value]="images" [showIndicators]="true">
<ng-template pTemplate="item" let-item>
<img [src]="..." />
</template>
</p-galleria>
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 indicators in Angular PrimeNG. We will make indicators to the left using indicatorsPosition property. We will also make images change on hover by setting the changeItemOnIndicatorHover property to true.
HTML
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Indicator</h2>
<div style="background-color: black;
width:50%;
display:block">
<p-galleria [value]="images"
[showThumbnails]="false"
[showIndicators]="true"
[changeItemOnIndicatorHover]="true"
[showIndicatorsOnItem]="true"
indicatorsPosition="left">
<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>
|
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'
},
];
}
|
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 indicators to the right using indicatorsPosition property. We will also make images to change on click.
HTML
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Indicator</h2>
<div style="background-color: black;
width:50%;
display:block">
<p-galleria [value]="images"
[showThumbnails]="false"
[showIndicators]="true"
[showIndicatorsOnItem]="true"
indicatorsPosition="right">
<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>
|
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'
},
];
}
|
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/indicator
Share your thoughts in the comments
Please Login to comment...