What is Angular PrimeNG Galleria Indicators?

In this article, we will learn Angular PrimeNG Galleria Indicators,This free Angular tutorial for complete beginners will help you learn Angular from scratch.

Angular PrimeNG Galleria Indicators - ❤️Angular Tutorials In 2024

Q: How to use Angular PrimeNG Galleria Indicators in Angular?

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

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:

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 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.

app.component.html:

HTML

<div id="GFG"> 
       <h1 style="color:green">w3wiki</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>

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:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png', 
            thumbnailImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png', 
            alt: 'Description for Image 1', 
            title: 'Title 1'
        }, 
        { 
            previewImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png', 
            thumbnailImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png', 
            alt: 'Description for Image 2', 
            title: 'Title 2'
        }, 
        { 
            previewImageSrc: 
'https://media.w3wiki.net/wp-content/cdn-uploads/Java.png', 
            thumbnailImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/Java.png', 
            alt: 'Description for Image 3', 
            title: 'Title 3'
        }, 
        { 
            previewImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png', 
            thumbnailImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png', 
            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 make indicators to the right using indicatorsPosition property. We will also make images to change on click.

app.component.html:

HTML

<div id="GFG"> 
       <h1 style="color:green">w3wiki</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>

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:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png', 
            thumbnailImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png', 
            alt: 'Description for Image 1', 
            title: 'Title 1'
        }, 
        { 
            previewImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png', 
            thumbnailImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png', 
            alt: 'Description for Image 2', 
            title: 'Title 2'
        }, 
        { 
            previewImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/Java.png', 
            thumbnailImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/Java.png', 
            alt: 'Description for Image 3', 
            title: 'Title 3'
        }, 
        { 
            previewImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png', 
            thumbnailImageSrc:  
'https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png', 
            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/indicator