Angular PrimeNG Image Properties

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 article, we will see Angular PrimeNG Image Properties.

The Image component is used to show a single image to the user with the preview and basic transformations.

Angular PrimeNG Image Properties:

• preview: This is a boolean property. It specifies if the preview of the image is enabled. Its default value is false.
• style: This is the inline styling of the element. It accepts any type of value & its default value is null.
• styleClass: This is the style class of the element. It is of string type & its default value is null.
• imageStyle: This is the inline styling of the image element. It accepts any type of value & its default value is null.
• imageClass: This is the style class of the image element. It is of string type & its default value is null.
• src: This is the URL of the image to show. It is of string type with SafeUrl & its default value is null.
• alt: This is the alternate text of the image. It is displayed when the image is not available. It is of string type & its default value is null.
• width: This is the width of the image element. It is of string type & its default value is null.
• height: This is the height of the image element. It is of string type & its default value is null.

Syntax:

<p-image 
    src="..." 
    [preview]="..."
    height="..."
    width="..."
    imageClass="..."
    imageStyle="..."
    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:

Project Structure

Example 1: This example shows the use of the preview property to enable the image preview in Angular PrimeNG.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Properties</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 example shows the use of the imageClass property to apply styling to the image element in Angular PrimeNG.

app.component.html

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

<p-image src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220408213837/gfg200x200min.png"
         imageClass="rotated-image"
         alt="logo">
</p-image>

app.component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: [
        `:host ::ng-deep .rotated-image{
         transform: rotate(15deg);
        }`
    ]
})
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