Angular PrimeNG Image Preview

Last Updated : 29 Sep, 2022

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 Preview.

The Image component is used to show a single image to the user with the preview and basic transformations. To enable the image property we have to set the preview property of the Image component to true.

Angular PrimeNG Image Preview Properties:

src: This property specifies the URL of the image to be displayed.
alt: This is the alternate text of the image which is displayed when the image is not available.
preview: This is a boolean property. It specifies whether the preview of the image is enabled.

Syntax:

<p-image 
    src="..."
    [preview]="..." 
    alt="...">
</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.

Example 1: This is a basic example illustrating the use of the preview mode in Angular PrimeNG Image.

app.component.html

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

<p-image 
    src="https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
    [preview]="true" 
    alt="logo">
</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 showing the use of the image preview in Angular PrimeNG. Here, we changed the icon displayed on hover to the "pi-cog" icon.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Preview</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-cog" 
            style="font-size: 30px;">
        </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 { }