Angular PrimeNG Image Component

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. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Image Component.

The Image component is used to display images and PrimeNG provides many transforming features and options so that we can display images according to our choice and design.

Angular PrimeNG Image Component Properties:

• preview(boolean): It controls the preview functionality. The default value is false.
• style(any): It is the inline style of the element.
• styleClass(string): It is the style class of the element.
• imageStyle(any): It is the inline style of the image element.
• imageClass(string): It is the style class of the image element.
• src(string | SafeUrl): It is the source of the image element.
• alt(string): It is the alternative attribute of the image element.
• width(string): The image element’s width attribute.
• height(string): The height attribute of the image element.

Angular PrimeNG Image Component Events:

• onShow: It is triggered when the preview overlay is shown.
• onHide: It is triggered when the preview overlay is hidden.
• onImageError(event): The event is triggered if an error occurs while loading an image file.

Angular PrimeNG Image Component Templates:

• indicator: It indicates the image component.

Angular PrimeNG Image Component Styling:

• p-image: It is the container element.
• p-image-preview-container: It is the container element with preview enabled.
• p-image-preview-indicator: It is the mask layer over the image when hovered.
• p-image-preview-icon: It is the icon of the preview indicator.
• p-image-mask: It is the preview overlay container.
• p-image-toolbar: It is the transformation options container.
• p-image-action: It is an element inside the toolbar.
• p-image-preview: It is the image element inside the preview overlay.

Syntax:

Import the image module

import {ImageModule} from 'primeng/image';

Use the Image component using the p-image component.

<p-image src="image_source.jpg" 
         alt="Image" width="400">
</p-image>

Creating Angular application & Module Installation:

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

ng new geeks_angular

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

cd geeks_angular

Step 3: Install PrimeNG in your given directory.

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

Project Structure: The project structure will look like the following:

Example 1: In the following example, we have some image components.

• app.component.html

HTML

<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Image Component</h3>
<p-image src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
         alt="Image"
         width="250">
</p-image>
<p-image src=
"https://yt3.ggpht.com/ytc/AMLnZu_aJA1a-K4fe7a9rvEc3bt_GPye2ER0Mo_Yzh2fGg=s900-c-k-c0x00ffffff-no-rj"
         alt="Image"
         width="250">
</p-image>

• app.component.ts

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
import { ImageModule } from 'primeng/image';

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

Output:

Example 2: In the following example, we will use the preview property of the image component.

• app.component.html

HTML

<h1 style="color: green; text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Image Component</h3>
<p-image src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
         alt="Image"
         width="250"
         [preview]="true">
</p-image>

• app.component.ts

Javascript

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    constructor(
        private messageService: MessageService,
        private primengConfig: PrimeNGConfig
    ) { }

    ngOnInit() {
        this.primengConfig.ripple = true;
    }
    showImage(event) { }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { ButtonModule } from 'primeng/button';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';
import { ImageModule } from 'primeng/image';

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

Output:

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