Angular PrimeNG Image Templates

Angular PrimeNG is an open-source library that consists 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 discuss Angular PrimeNG Image Templates.

The Image Component is used to show an image on the front end with the preview and other transformations. When the image preview is enabled, the content of the preview indicator can be customized using the indicator template. 

Angular PrimeNG Image Templates:

• indicator: This template is used to set the indicator content for the image.

Angular PrimeNG Image Templates Properties:

• src: This property is used to specify the image url for the image.
• preview: This property is used to enable the image preview for the image component.

Syntax:

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

Creating Angular Application and Installing the Module:

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

ng new appname

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

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Example 1: In this example we set the indicator content of the Image component to the "pi-external-link" icon.

• app.component.html:

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h3>
    Angular PrimeNG Image Templates
</h3>

<p-image 
    [preview]="true" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png">
    <ng-template pTemplate="indicator">
        <p>Click to open preview</p> 
        <p><i class="pi pi-external-link"></i></p>
    </ng-template>
</p-image>

• app.component.ts:

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent { }

• app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ImageModule } from "primeng/image";

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

export class AppModule { }

Output:

Example 2: In this example, we show a non-closable chip using the indicator template when the user hover over the image to preview. 

• app.component.html:

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Templates</h3>

<h4>
      A non closable chip is shown 
      on hovering the image.
</h4>

<p-image src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png">
    [preview]="true"
    <ng-template pTemplate="indicator">
        <p-chip label="Click for image preview"></p-chip>
    </ng-template>
</p-image>

• app.component.ts:

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent { }

• app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ImageModule } from "primeng/image";
import { ChipModule } from "primeng/chip";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule,
        FormsModule,
        ChipModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})

export class AppModule { }

Output:

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