极客教程Angular PrimeNG Galleria的页眉和页脚
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG Galleria Header and Footer。
Galleria是一个先进的内容库组件。它用于以一种有吸引力的方式显示图片。Galleria组件允许我们做一个自定义的页眉和页脚属性。页眉用于在Galleria的顶部设置一些文本/属性，而页脚则用于在Galleria的底部设置文本/属性。
语法:
<p-galleria [numVisible]="..." [value]="...">
<ng-template pTemplate="header">
<h1>
Header
</h1>
</ng-template>
<ng-template pTemplate="footer">
<h1>
Footer
</h1>
</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：在这个例子中，我们将看到Angular PrimeNG中的Galleria组件，我们将使用URL获取图片，并在galleria组件中显示它们，并在标题中显示一些文本。
- app.component.html:
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Header and Footer</h2>
<div style="width:60%; background-color: black;">
<p-galleria [value]="images"
[numVisible]="3">
<ng-template pTemplate="header">
<h1 style="color:red">
Header
</h1>
</ng-template>
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc"
style="width: 50%;" />
</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：在这个例子中，我们将看到Angular PrimeNG中的Galleria组件，我们将使用URL来获取图片，并在galleria组件中显示它们，并在页脚显示一些文字。
- app.component.html
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Header and Footer</h2>
<div style="width:60%;
background-color: black;">
<p-galleria [value]="images"
[numVisible]="3">
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc"
style="width: 50%;" />
</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>
<ng-template pTemplate="footer">
<h1 style="color:white">
Footer
</h1>
</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 { }
输出:
