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. In this article, we will see the Angular PrimeNG Galleria Styling.
Galleria is an advanced content gallery component. It is used for displaying images in an attractive manner. The Galleria component allows us to do custom styling to it using several pre-defined classes. These classes can be used for setting up headers, footers, captions, etc for the Galleria component.
Angular PrimeNG Galleria Styling:
- p-galleria: It is a container for an element.
- p-galleria-header: It is used to define the header section.
- p-galleria-footer: It is used to define the footer section.
- p-galleria-item-wrapper: It is used to display the preview of the content element, which contains preview and indicator containers.
- p-galleria-item-container: It is used to define the container of the preview content, which contains navigation buttons, the preview item & the caption content.
- p-galleria-indicators: It is used to define the container of the indicators, which contains the indicator items.
- p-galleria-thumbnail-wrapper: It is used to define the thumbnail for the content element.
- p-galleria-thumbnail-container: It is used to define the container of the thumbnail content, which contains navigation buttons and thumbnail items.
- p-galleria-caption: It defines the content of the preview caption.
Creating Angular application & module installation:
- Install the Angular CLI
npm install - g @angular/cli
- Create an Angular application using the following command.
ng new appname
- After creating your project folder i.e. appname, move to it using the following command.
cd appname
- Install PrimeNG in your given directory.
npm install primeng --save npm install primeicons --save
Project Structure: The project structure will look like the following image:
Example 1: This example illustrates the basic usage of the Galleria Styling in Angular PrimeNG by implementing the Galleria header, footer, and indicator.
- app.component.html:
HTML
<div id="GFG">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>Angular PrimeNG Galleria Styling</h2>
<div style="background-color: black;
width: 50%;
display: block">
<p-galleria [value]="images"
[showThumbnails]="false"
[showIndicators]="true"
[circular]="true">
<ng-template pTemplate="header">
<h1 style="color: white;
text-align: center">
GeeksforGeeks
</h1>
</ng-template>
<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"
style="width: 80%" />
</div>
</ng-template>
<ng-template pTemplate="footer">
<h1 style="color: white;
text-align: center">
Anugular 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 { } |
Output:
Example 2: This example describes the Galleria Styling in Angular PrimeNG where we will be utilizing the Galleria header and captions.
- app.component.html:
Javascript
<div id="GFG">
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>Angular PrimeNG Galleria Styling</h2>
<div style="background-color: black;
width: 50%;
display: block">
<p-galleria [value]="images" [circular]="true">
<ng-template pTemplate="header">
<h1 style="color: white;
text-align: center">
Angular Header
</h1>
</ng-template>
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc" style="width: 100%;
display: block" />
</ng-template>
<br /><br />
<ng-template pTemplate="caption" let-item>
<h4 style="color: #ffffff">
{{item.title}}
</h4>
<p>{{item.alt}}</p>
</ng-template>
<ng-template pTemplate="thumbnail" let-item>
<div class="grid grid-nogutter
justify-content-center">
<img [src]="item.thumbnailImageSrc" style="width: 80%" />
</div>
</ng-template>
</p-galleria>
</div>
</div> |
- app.component.ts:
Javascript
import { Component } from '@angular/core';
@Component({ selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
}) export class AppComponent { title = 'GFG';
images: any[] = [
{
previewImageSrc:
thumbnailImageSrc:
alt: 'Cascading Style Sheets',
title: 'CSS'
},
{
previewImageSrc:
thumbnailImageSrc:
alt: 'Angular for Front end',
title: 'Angular'
},
{
previewImageSrc:
thumbnailImageSrc:
alt: 'Java Programming Language',
title: 'Java'
},
{
previewImageSrc:
thumbnailImageSrc:
alt: 'Hypertext Markup Language',
title: 'HTML'
},
];
} |
- 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 { } |
Output:
Reference: http://primefaces.org/primeng/galleria