Шаблоны Angular PrimeNG Galleria

Опубликовано: 24 Февраля, 2023

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Он предоставляет множество шаблонов, компонентов, дизайн тем, обширную библиотеку иконок и многое другое. В этой статье мы увидим шаблоны Angular PrimeNG Galleria.

Компонент Galleria — это расширенный компонент галереи контента. Он используется для отображения изображений в привлекательной форме. Шаблоны Galleria можно использовать для дополнительной настройки и добавления дополнительных компонентов, таких как заголовок, подпись и т. д.

Шаблоны галереи Angular PrimeNG:

  • header : это компонент заголовка, который используется для включения заголовка в шаблон.
  • индикатор : это индикаторный компонент, который будет отображать изменения в шаблонах Галереи с помощью сплошного маленького круга. Это также помогает указать текущий активный шаблон с помощью сплошного маленького кружка.
  • caption : используется для добавления подписи к изображению.
  • нижний колонтитул : это компонент нижнего колонтитула, который используется для включения содержимого в нижний колонтитул шаблона.

Синтаксис : добавьте шаблон следующим образом.

<p-galleria [numVisible]="3" [value]="images">
    <ng-template pTemplate="item" let-item>
        ...
    </ng-template>
    <ng-template pTemplate="header" let-item>
        ...
    </ng-template>
</p-galleria>

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new geeks_angular

Шаг 2: После создания папки вашего проекта, например, geeks_angular, перейдите к ней с помощью следующей команды.

cd geeks_angular

Шаг 3: Установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: Структура проекта будет выглядеть следующим образом:

Пример 1. В следующем примере у нас есть компонент галереи с верхним и нижним колонтитулами.

  • app.component.html

HTML




<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Template</h2>
<div style="width:100%; 
            background-color: black; ">
    <p-galleria [numVisible]="3" 
                [value]="images">
        <ng-template pTemplate="item" let-item>
            <img [src]="item.previewImageSrc" 
                 [alt]="item.alt" 
                 [title]="item.title" 
                 style="width: 50%;" />
        </ng-template>
  
        <ng-template pTemplate="thumbnail" 
                     let-item width="50%">
            <div class="grid grid-nogutter 
                        justify-content-center">
                <img [src]="item.thumbnailImageSrc" 
                     [alt]="item.alt" 
                     [title]="item.title" 
                     width="80%" />
            </div>
        </ng-template>
        <ng-template pTemplate="header" let-item>
            <h1 style="color:white;
                       text-align:center;
                       padding:24px;">
                Images
            </h1>
        </ng-template>
        <ng-template pTemplate="footer" let-item>
            <h3 style="color:white;
                       text-align:center;
                       padding:24px;">
                There are {{ images.length }} images
            </h3>
        </ng-template>
    </p-galleria>
</div>

  • app.component.ts

Javascript




import { Component } from "@angular/core";
  
@Component({
    selector: "my-app",
    templateUrl: "./app.component.html",
})
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 { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CarouselModule } from "primeng/carousel";
import { GalleriaModule } from "primeng/galleria";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CarouselModule,
        GalleriaModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
  
})
export class AppModule { }

Выход:

Пример 2. В следующем примере мы добавили заголовок к компоненту галереи с индикаторами.

  • app.component.html

HTML




<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Template</h2>
<div style="width:100%; 
            background-color: black; ">
  <p-galleria [numVisible]="3" 
              [value]="images" 
              [showIndicators]="true">
    <ng-template pTemplate="item" let-item>
      <img [src]="item.previewImageSrc"
           [alt]="item.alt"
           [title]="item.title"
           style="width: 50%;">
    </ng-template>
    <ng-template pTemplate="caption" let-item>
        <p style="color:white;text-align:center;">
            {{ item.title }}
          </p>
    </ng-template>
  </p-galleria>
</div>

  • app.component.ts

Javascript




import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
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 { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CarouselModule } from "primeng/carousel";
import { GalleriaModule } from "primeng/galleria";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CarouselModule,
        GalleriaModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
  
})
export class AppModule { }

Выход:

Ссылка: https://primefaces.org/primeng/galleria