Angular PrimeNG Image Events

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 know how to use Angular PrimeNG Image Events.

The Image Component is used to display a single image with preview and transform options. The image component has 3 events named onShow, onHide, and onImageError which are listed below.

Angular PrimeNG Image Events:

• onShow: This event is fired when the image preview overlay is shown.
• onHide: This event is fired when the image preview overlay is hidden.
• onImageError: This event is fired if the browser fails to load the image file. This event was added in PrimeNg v14.1.2.

Syntax:

<p-image src="..."
         [preview]="true" 
         (image-event)="callbackFunction()" 
         width="...">
</p-image>

Creating Angular application & module installation:

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

ng new newapp

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

cd newapp

Step 3: Install PrimeNG and PrimeIcons in your project directory.

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

Project Structure: After complete installation, the project structure will look like the following:

Example 1: This example illustrates the use of the onImageError event of the PrimeNG Image component that is triggered when the image fails to load. Here we pass the link to an image file that does not exist so the image will not be loaded triggering the onImageError event.

• app.component.html

HTML

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

<!-- Image does not exist at the given source -->
<p-image src="./fakeImage.jpg"
         (onImageError)="imageErr()"
         width="200">
</p-image>
<p-toast></p-toast>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService]
})

export class AppComponent {
    constructor(private msgs: MessageService) { }

    imageErr() {
        setTimeout(() => {
            this.msgs.add({
                severity: 'success',
                summary: 'Failed to load Image',
                detail: 'onImageError Event Fired'
            });
        }, 1000);
    }
}

• app.module.ts

Javascript

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

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

Output:

Example 2: In this example, we used the onShow and onHide events of the Image to show a toast message using the message service.

• app.component.html

HTML

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

<p-image src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221023092911/gfglogo-200x200.png"
         [preview]="true"
         (onShow)="imageShow()"
         (onHide)="imageHide()"
         width="200">
</p-image>
<p-toast></p-toast>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService]
})

export class AppComponent {
    constructor(private msgs: MessageService) { }

    imageShow() {
        this.msgs.add({
            severity: 'success',
            summary: 'Preview Shown',
            detail: 'onShow Event Fired'
        });
    }

    imageHide() {
        this.msgs.add({
            severity: 'error',
            summary: 'Preview Hidden',
            detail: 'onHide Event Fired'
        });
    }
}

• app.module.ts:

Javascript

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

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

Output:

Reference: https://www.primefaces.org/primeng/image