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.
Project Structure
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
[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
[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 { }
|
Output:
Reference: http://primefaces.org/primeng/image
Share your thoughts in the comments
Please Login to comment...