Angular PrimeNG Galleria Элементов на странице
Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим компонент 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: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.
cd appname
Шаг 4: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: Структура проекта будет выглядеть следующим образом.
Пример 1. В этом примере мы будем получать изображения по URL-адресу и отображать их в компоненте галереи, установив numVisible=2.
приложение.component.html:
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
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: В этом примере мы будем получать изображения по URL-адресу и отображать их в компоненте галереи, установив numVisible=3.
приложение.component.html:
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
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