Angular PrimeNG Galleria Header and Footer
Last Updated :
08 Nov, 2022
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 Angular PrimeNG Galleria Header and Footer.
The Galleria is an advanced content gallery component. It is used for displaying images in an attractive manner. The Galleria component allows us to do a custom header and footer properties. The Header is used to set some text/property at the top of Galleria while the Footer is used for setting text/property at the bottom of Galleria.
Syntax:
<p-galleria [numVisible]="..." [value]="...">
<ng-template pTemplate="header">
<h1>
Header
</h1>
</ng-template>
<ng-template pTemplate="footer">
<h1>
Footer
</h1>
</ng-template>
</p-galleria>
Creating Angular application & module Installation:
Step 1: Install the Angular CLI
npm install - g @angular/cli
Step 2: Create an Angular application using the following command.
ng new appname
Step 3: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Step 4: 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: In this example, we will see the Galleria component in Angular PrimeNG, where we will fetch the images using URL and display them in the galleria component and display some text in the header.
HTML
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Header and Footer</h2>
<div style="width:60%; background-color: black;">
<p-galleria [value]="images"
[numVisible]="3">
<ng-template pTemplate="header">
<h1 style="color:red">
Header
</h1>
</ng-template>
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc"
style="width: 50%;" />
</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>
|
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'
},
];
}
|
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: In this example, we will see the Galleria component in Angular PrimeNG, where we will fetch the images using the URL and display them in the galleria component and display some text in the footer.
Javascript
<div id="GFG">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG Galleria Header and Footer</h2>
<div style="width:60%;
background-color: black;">
<p-galleria [value]="images"
[numVisible]="3">
<ng-template pTemplate="item" let-item>
<img [src]="item.previewImageSrc"
style="width: 50%;" />
</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>
<ng-template pTemplate="footer">
<h1 style="color:white">
Footer
</h1>
</ng-template>
</p-galleria>
</div>
</div>
|
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'
},
];
}
|
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...