Angular PrimeNG Image Indicator Templating

Angular PrimeNG is an open-source UI component library for Angular Applications. Using the components provided by Angular PrimeNG, one can create stunning and responsive angular applications. In this post, we will see Angular PrimeNG Image Indicator Templating.

The Image Component is used to show a single image to the user with the preview and basic transformations. In preview mode, when the image is hovered by the user, an eye icon is shown by default. This behavior can be altered by using the indicator template where we can define custom content.

Angular PrimeNG Image Indicator Templating Template:

• indicator: The indicator template is used to customize the content of the overlay which is visible when we hover over the image whose preview is enabled.

Syntax:

<p-image 
    src="..."
    [preview]="..." 
    alt="...">

    <ng-template pTemplate="indicator">
        ...
    </ng-template>
</p-image>

Creating Angular application and Installing the Modules:

Step 1: Create an Angular application using the following command.

ng new myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command.

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps, the structure will look like the following.

Project Structure

Example 1: This is the basic example of Image indicator templating. Here, the default eye icon has been replaced with the “pi-box” icon.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Indicator Templating</h3>

<p-image
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
    [preview]="true"
    alt="logo">

    <ng-template pTemplate="indicator">
        <i
            class="pi pi-box"
            style="font-size: 24px;">
        </i>
    </ng-template>
</p-image>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent { }

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 { ImageModule } from 'primeng/image';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: This is another example of indicator templating. Here we added an icon and a paragraph to the indicator template.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Indicator Templating</h3>

<p-image
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
    [preview]="true"
    alt="logo">

    <ng-template pTemplate="indicator">
        <i class="pi pi-external-link mr-2"></i>
        <div><p>Preview Image</p></div>
    </ng-template>
</p-image>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent { }

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 { ImageModule } from 'primeng/image';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/image