Верхний и нижний колонтитулы 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