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