极客教程Angular PrimeNG Galleria 每页项目
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG Galleria组件。
Angular PrimeNG Galleria是一个先进的内容库组件。它用于以一种有吸引力的方式显示图片。让我们通过一些例子来了解一下。
Angular PrimeNG Galleria每页的项目：每页的项目数是用numVisible属性定义的。它的类型是数字，默认值是3。
语法:
<p-galleria [numVisible]="*">
<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
项目结构：项目结构将看起来像以下图片。
例子1：在这个例子中，我们将使用URL获取图片，并在galleria组件中显示它们，并将设置numVisible=2。
app.component.html:
<div id="GFG">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Items per page</h2>
<div style="background-color: black;
width:50%;display:block">
<p-galleria [value]="images" [numVisible]="2">
<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
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'
},
];
}
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 { }
输出:
例子2：在这个例子中，我们将使用URL获取图片，并在galleria组件中显示它们，并将设置numVisible=3。
app.component.html:
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Items per page</h2>
<div style="background-color: black;
width: 50%; display: block">
<p-galleria [value]="images" [numVisible]="3">
<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
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'
},
];
}
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 { }
OUTPUT
