Angular PrimeNG Galleria Programmatic

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将看到Angular PrimeNG Galleria Programmatic。

Galleria是一个先进的内容库组件。它用于以一种有吸引力的方式显示图片。Galleria Programmatic可以利用activeIndex属性进行编程控制。

语法:

<p-galleria [value]="images"  
            [numVisible]="*" 
            [activeIndex]="activeIndex"> 
   <ng-template pTemplate="item" let-item>
       <img [src]="..." />
   </ng-template>
</p-galleria>

创建Angular应用程序和模块安装。

第1步：安装Angular CLI

npm install - g @angular/cli

第2步：使用以下命令创建一个Angular应用程序。

ng new appname

第3步：在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第4步：在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：项目结构将看起来像以下图片。

Angular PrimeNG Galleria Programmatic

例子1：这个例子演示了Angular PrimeNG中Galleria Programmatic的基本用法。在这里，我们将使用URL获取图片，并使用加号和减号按钮以编程方式改变它们。

app.component.html

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Galleria Programmatic</h2>
  
    <div>
        <button (click)="next()">Plus</button>
        <button (click)="prev()">Minus</button>
    </div>
    <br><br>
    <div style="background-color: black;
                width:50%;
                display:block">
        <p-galleria [value]="images" 
                    [activeIndex]="activeIndex" 
                    [numVisible]="1" 
                    [showThumbnails]="false">
            <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" 
                          style="width: 80%" />
                </div>
            </ng-template>
        </p-galleria>
    </div>
</div>

app.component.ts

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.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            alt: 'Description for Image 1',
            title: 'Title 1'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            alt: 'Description for Image 2',
            title: 'Title 2'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            alt: 'Description for Image 3',
            title: 'Title 3'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            alt: 'Description for Image 4',
            title: 'Title 4'
        },
  
    ];
  
    get activeIndex(): number {
        return this._activeIndex;
    }
  
    set activeIndex(newValue) {
        if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {
            this._activeIndex = newValue;
        }
    }
  
    _activeIndex: number = 2;
    next() {
        this.activeIndex++;
    }
  
    prev() {
        this.activeIndex--;
    }
}

app.module.ts

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

输出:

Angular PrimeNG Galleria Programmatic

实例2：这是另一个例子，演示了Galleria Programmatic在Angular PrimeNG中的使用。在这里，我们将以编程方式改变图片并显示缩略图。

app.component.html

<div id="GFG">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Angular PrimeNG Galleria Programmatic</h2>
  
    <div>
        <button (click)="next()">Plus</button>
        <button (click)="prev()">Minus</button>
    </div>
    <br><br>
    <div style="background-color: black;
                width:50%;
                display:block">
        <p-galleria [value]="images" 
                    [activeIndex]="activeIndex">
            <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" 
                         style="width: 80%" />
                </div>
            </ng-template>
        </p-galleria>
    </div>
</div>

app.component.ts

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.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png',
            alt: 'Description for Image 1',
            title: 'Title 1'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png',
            alt: 'Description for Image 2',
            title: 'Title 2'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png',
            alt: 'Description for Image 3',
            title: 'Title 3'
        },
        {
            previewImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            thumbnailImageSrc:
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png',
            alt: 'Description for Image 4',
            title: 'Title 4'
        },
  
    ];
  
    get activeIndex(): number {
        return this._activeIndex;
    }
  
    set activeIndex(newValue) {
        if (this.images && 0 <= newValue && newValue <= (this.images.length - 1)) {
            this._activeIndex = newValue;
        }
    }
  
    _activeIndex: number = 2;
    next() {
        this.activeIndex++;
    }
  
    prev() {
        this.activeIndex--;
    }
}

app.module.ts

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

输出:

Angular PrimeNG Galleria Programmatic