Angular PrimeNG图像模板

Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，用来进行伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将讨论Angular PrimeNG图片模板。

图像组件用于在前端显示带有预览和其他转换功能的图像。当图像预览被启用时，预览指示器的内容可以使用指示器模板来定制。

Angular PrimeNG图像模板：

indicator。该模板用于设置图像的指示器内容。

Angular PrimeNG图像模板属性：。

src: 此属性用于指定图片的URL。
preview。该属性被用于启用图像组件的图像预览。

语法:

<p-image src="...">
    <ng-template pTemplate="indicator">
        ...
    </ng-template>
</p-image>

创建Angular应用程序并安装模块：。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG图像模板

Project Structure

例子1：在这个例子中，我们将图像组件的指标内容设置为 “pi-external-link “图标。

app.component.html:

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h3>
    Angular PrimeNG Image Templates
</h3>
  
<p-image 
    [preview]="true" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png">
    <ng-template pTemplate="indicator">
        <p>Click to open preview</p> 
        <p><i class="pi pi-external-link"></i></p>
    </ng-template>
</p-image>

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent { }

app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ImageModule } from "primeng/image";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG图像模板

例子2：在这个例子中，当用户将鼠标悬停在图片上进行预览时，我们使用指示器模板显示了一个不可关闭的芯片。

app.component.html:

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Angular PrimeNG Image Templates</h3>
  
<h4>
      A non closable chip is shown 
      on hovering the image.
</h4>
  
<p-image src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png">
    [preview]="true"
    <ng-template pTemplate="indicator">
        <p-chip label="Click for image preview"></p-chip>
    </ng-template>
</p-image>

app.component.ts:

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: []
})
export class AppComponent { }

app.module.ts:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ImageModule } from "primeng/image";
import { ChipModule } from "primeng/chip";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ImageModule,
        FormsModule,
        ChipModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }