Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Galleria Templates.
The Galleria Component is an advanced content gallery component. It is used for displaying images in an attractive manner. Galleria Templates can be used to customize it even more and add extra components to it such as header, caption, etc.
Angular PrimeNG Galleria Templates:
- header: It is the header component that is used to include the header in the template.
- indicator: It is the indicator component that will display the change in the Galleria Templates with the help of a solid small circle. It also helps to indicate the current active template with the solid small circle.
- caption: It is used to add a caption to an image.
- footer: It is the footer component that is used to include the content in the footer of the template.
Syntax: Add a template as follows
<p-galleria [numVisible]="3" [value]="images">
<ng-template pTemplate="item" let-item>
...
</ng-template>
<ng-template pTemplate="header" let-item>
...
</ng-template>
</p-galleria>Creating Angular application & Module Installation:
Step 1: Create an Angular application using the following command.
ng new geeks_angular
Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.
cd geeks_angular
Step 3: Install PrimeNG in your given directory.
npm install primeng --save npm install primeicons --save
Project Structure: The project structure will look like the following:
Example 1: In the following example, we have a galleria component with a header and a footer.
- app.component.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
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
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 { } |
Output:
Example 2: In the following example, we have added a caption to the galleria component with indicators.
- app.component.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
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
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 { } |
Output:
Reference: https://primefaces.org/primeng/galleria