Angular PrimeNG Galleria FullScreen

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 post, we will see Angular PrimeNG Galleria FullScreen.

Galleria is an advanced component to display images in an attractive manner. When the galleria component is in fullscreen mode, a blackish mask covers the whole page and the content is displayed over that mask.

Angular PrimeNG Galleria FullScreen Properties:

• value: This property accepts an array of objects used to display the galleria items.
• autoPlay: If this property is set to true, the items of the galleria component will be shown as a slideshow.
• transitionInterval: This is a property that accepts the milliseconds for which an item will be shown in autoplay mode.
• showThumbnails: If this boolean property is set to true, the item thumbnails will not be shown.
• visible: This boolean property specifies whether the galleria component is opened in fullscreen.
• fullScreen: This property is used to enable the fullscreen mode for the galleria component.

Syntax:

<p-galleria 
    [value]="..." 
    [fullScreen]="..."
    [(visible)]="...">

    <ng-template pTemplate="item" let-x>
        ...
    </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 is a basic example showing how to display the galleria component in fullscreen with thumbnails.

• app.component.html:

HTML

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

<p-galleria
    [value]="img"
    [containerStyle]="{'max-width': '500px'}"
    [fullScreen]="true"
    [(visible)]="isVisible">

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

<p-button
    label="Show FullScreen"
    (click)="isVisible = true">
</p-button>

• 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[] = [];
    isVisible = false;

    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';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        GalleriaModule,
        ButtonModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: This is a basic example showing how to display the galleria component in fullscreen without thumbnails and with autoplay on.

• app.component.html:

HTML

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

<p-galleria
    [value]="img"
    [containerStyle]="{'max-width': '500px'}"
    [fullScreen]="true"
    [autoPlay]="true"
    [transitionInterval]="1500"
    [showThumbnails]="false"
    [(visible)]="isVisible">

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

<p-button
    label="Show FullScreen"
    (click)="isVisible = true">
</p-button>

• 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[] = [];
    isVisible = false;

    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';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        GalleriaModule,
        ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

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