Верхний и нижний колонтитулы Angular PrimeNG Galleria
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим верхний и нижний колонтитулы Angular PrimeNG 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: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 4: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет выглядеть следующим образом:
Пример 1. В этом примере мы увидим компонент «Галерея» в Angular PrimeNG, где мы будем получать изображения по URL-адресу, отображать их в компоненте «Галерея» и отображать некоторый текст в заголовке.
- приложение.component.html:
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
Javascript
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: thumbnailImageSrc: alt: "Description for Image 1", title: "Title 1" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 2", title: "Title 2" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 3", title: "Title 3" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 4", title: "Title 4" }, ];} |
- app.module.ts
Javascript
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. В этом примере мы увидим компонент Galleria в Angular PrimeNG, где мы будем получать изображения с помощью URL-адреса и отображать их в компоненте галереи, а также отображать текст в нижнем колонтитуле.
- app.component.html
Javascript
<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
Javascript
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: thumbnailImageSrc: alt: "Description for Image 1", title: "Title 1" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 2", title: "Title 2" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 3", title: "Title 3" }, { previewImageSrc: thumbnailImageSrc: alt: "Description for Image 4", title: "Title 4" }, ];} |
- app.module.ts
Javascript
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 { } |
Выход:
Ссылка: http://primefaces.org/primeng/galleria