Angular PrimeNG Galleria Programmatic
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 Programmatic.
The Galleria is an advanced content gallery component. It is used for displaying images in an attractive manner. The Galleria Programmatic can be utilized to control programmatically using the activeIndex property.
Syntax:
<p-galleria [value]="images" [numVisible]="*" [activeIndex]="activeIndex"> <ng-template pTemplate="item" let-item> <img [src]="..." /> </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: This example demonstrates the basic usage of the Galleria Programmatic in Angular PrimeNG. Here, we will fetch the images using the URL and change them programmatically using the plus and minus buttons.
- app.component.html
HTML
< div id = "GFG" > < h1 style = "color:green" >w3wiki</ h1 > < h2 >Angular PrimeNG Galleria Programmatic</ h2 > < div > < button (click)="next()">Plus</ button > < button (click)="prev()">Minus</ button > </ div > < br >< br > < div style="background-color: black; width:50%; display:block"> < p-galleria [value]="images" [activeIndex]="activeIndex" [numVisible]="1" [showThumbnails]="false"> < 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 > </ 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: 'https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png' , thumbnailImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png' , alt: 'Description for Image 1' , title: 'Title 1' }, { previewImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png' , thumbnailImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png' , alt: 'Description for Image 2' , title: 'Title 2' }, { previewImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/Java.png' , thumbnailImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/Java.png' , alt: 'Description for Image 3' , title: 'Title 3' }, { previewImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png' , thumbnailImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png' , alt: 'Description for Image 4' , title: 'Title 4' }, ]; get activeIndex(): number { return this ._activeIndex; } set activeIndex(newValue) { if ( this .images && 0 <= newValue && newValue <= ( this .images.length - 1)) { this ._activeIndex = newValue; } } _activeIndex: number = 2; next() { this .activeIndex++; } prev() { this .activeIndex--; } } |
- 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 is another example that demonstrates the usage of the Galleria Programmatic in Angular PrimeNG. Here, we will programmatically change images and show thumbnails
- app.component.html
HTML
< div id = "GFG" > < h1 style = "color:green" >w3wiki</ h1 > < h2 >Angular PrimeNG Galleria Programmatic</ h2 > < div > < button (click)="next()">Plus</ button > < button (click)="prev()">Minus</ button > </ div > < br >< br > < div style="background-color: black; width:50%; display:block"> < p-galleria [value]="images" [activeIndex]="activeIndex"> < 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 > </ 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: 'https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png' , thumbnailImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png' , alt: 'Description for Image 1' , title: 'Title 1' }, { previewImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png' , thumbnailImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png' , alt: 'Description for Image 2' , title: 'Title 2' }, { previewImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/Java.png' , thumbnailImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/Java.png' , alt: 'Description for Image 3' , title: 'Title 3' }, { previewImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png' , thumbnailImageSrc: 'https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png' , alt: 'Description for Image 4' , title: 'Title 4' }, ]; get activeIndex(): number { return this ._activeIndex; } set activeIndex(newValue) { if ( this .images && 0 <= newValue && newValue <= ( this .images.length - 1)) { this ._activeIndex = newValue; } } _activeIndex: number = 2; next() { this .activeIndex++; } prev() { this .activeIndex--; } } |
- 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/programmatic
Contact Us