Angular PrimeNG Galleria Indicator

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 the Angular PrimeNG Galleria Indicator.

Galleria is an advanced component to display images in an attractive manner. It needs a template named item and an array of objects as the value. The use of the galleria component betters the user experience of the application. The Galleria Indicator allows users to navigate quickly through the galleria items.

Angular PrimeNG Galleria Indicator Properties:

• showIndicators: This property is used to enable/disable the indicators.
• indicatorsPosition: This property specifies the position of the indicators. There are 4 valid values:  “bottom”, “top”, “left” and “right”.
• showIndicatorsOnItem: This property specifies whether to show the indicators on the top of the item.
• changeItemOnIndicatorHover: When this is true, the galleria items will change when the user hovers over the indicator.
• value: This property accepts an array of objects to display as galleria items.
• numVisible: This property defines the number of thumbnails to show on one page.
• showThumbnails: When this is false, the galleria thumbnails will not be shown.

Angular PrimeNG Galleria Indicator Templates:

• item: The item template is used to specify how a single item galleria item will be structured.
• indicator: This template tells how a single indicator will be structured.

Syntax:

<p-galleria [value]="img" 
            [showIndicators]="true" 
            indicatorsPosition="top">
       ...
</p-galleria>

Creating Angular application and Installing the Modules:

• Create an Angular application using the following command.

ng new myapp

• After creating your project folder i.e myapp, move to it using the following command.

cd myapp

• 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: In this example, we set the showIndicators property to true and by default, the indicators will show outside the content the current item of the galleria will change when we click on the indicators.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Indicators</h3>

<h4>
    Indicators with Click Event
    and Outside the content
</h4>

<p-galleria [value]="img"
            [containerStyle]="{'max-width': '500px'}"
            [numVisible]="3"
            [showIndicators]="true"
            [showThumbnails]="false">
       <ng-template pTemplate="item" let-img>
              <img [src]="img.URL"
                   style="width: 100%;
                          display: block;" />
       </ng-template>
</p-galleria>

• app.component.ts:

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:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235505/eximg1.gif',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png',
            },
        ];
    }
}

• app.module.ts:

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 changeItemOnIndicatorHover property is set to true to change the galleria item when we hover over the indicators and the showIndicatorsOnItem property is also set to true to show the indicators on the top of the content.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Indicators</h3>

<h4>
     Indicators with Hover Event
     and Inside the content
</h4>

<p-galleria [value]="img"
            [containerStyle]="{'max-width': '500px'}"
            [numVisible]="3"
            [changeItemOnIndicatorHover]="true"
            [showIndicatorsOnItem]="true"
            [showIndicators]="true"
            [showThumbnails]="false">

       <ng-template pTemplate="item" let-img>
              <img [src]="img.URL"
                   style="width: 100%;
                          display: block;" />
       </ng-template>
</p-galleria>

• app.component.ts:

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:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235505/eximg1.gif',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png',
            },
        ];
    }
}

• app.module.ts:

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 3: In this example, we set the indicatorsPosition property to the left to show the indicators on the left of the content and used the indicator template to show custom indicators.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Galleria Indicators</h3>

<h4>
    Indicators with Hover Event
    and on the Left of the content
</h4>

<p-galleria [value]="img"
            [containerStyle]="{'max-width': '500px'}"
            [numVisible]="3"
            [changeItemOnIndicatorHover]="true"
            [showIndicatorsOnItem]="true"
            [showIndicators]="true"
            indicatorsPosition="left"
            [showThumbnails]="false">

       <ng-template pTemplate="item" let-img>
              <img [src]="img.URL"
                   style="width: 100%;
                          display: block;" />
       </ng-template>

       <ng-template pTemplate="indicator" let-i>
              <div style="background: white;
                          padding: 5px;
                          border-radius: 10px">
                     <span style="color: green;
                                  cursor: pointer">
                            {{i + 1}}
                     </span>
              </div>
       </ng-template>
</p-galleria>

• app.component.ts:

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:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg2-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235504/eximg3-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235503/eximg4-300x157.png',
            },
            {
                URL:
'https://media.geeksforgeeks.org/wp-content/uploads/20220927235501/eximg5-300x157.png',
            },
        ];
    }
}

• app.module.ts:

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/indicator