Angular PrimeNG Galleria AutoPlay

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

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. In autoplay mode, the active item of the galleria component changes automatically after a definer time. This time can be defined using the transitionInterval property.

Angular PrimeNG Galleria AutoPlay Properties:

• value: It accepts an array of objects to display as galleria items.
• circular: This is a boolean property and when set to true, the galleria items can be scrolled infinitely.
• autoPlay: This boolean property is used to enable/disable the slideshow of the galleria items by setting it to true/false.
• transitionInterval: This property is set to set the time for which one item should be shown. The default value is 4000ms. 

Syntax:

<p-galleria 
    [value]="img" 
    [containerStyle]="{'max-width': '500px'}" 
    [autoPlay]="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:

Example 1: This is a basic example illustrating how to enable autoplay in the galleria component.

• app.component.html

HTML

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

<p-galleria [value]="img"
            [containerStyle]="{'max-width': '500px'}"
            [autoPlay]="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>

• 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, we set the transitionInterval property to 1000 to set the transition delay to 1 second.

• app.component.html

HTML

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

<p-galleria [value]="img"
            [containerStyle]="{'max-width': '500px'}"
            [autoPlay]="true"
            [transitionInterval]="1000">

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

• 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:

Reference: http://primefaces.org/primeng/galleria/autoplay