Angular PrimeNG chip事件

Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将看到Angular PrimeNG Chip Events。

芯片组件使用文本、图标和图像在一个定义明确的结构中代表实体。芯片组件有2个事件onRemove和onImageError。

Angular PrimeNG芯片事件：

onRemove:当点击芯片的移除图标来移除芯片组件时，该事件被触发。
onImageError。当为芯片指定的图像无法加载时，该事件被触发。

Angular PrimeNG芯片事件属性：

label。此属性用于指定芯片标签。
image。此属性用于指定芯片图像。
removable。这个属性指定了芯片是否可移动。

语法:

<p-chip 
    (Event-Name)="callbackFunction()"
    label="..." 
    [removable]="...">
</p-chip>

创建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：在这个例子中，我们使用了芯片的onImageError事件，如果芯片的图像加载失败，我们就使用消息服务向用户的屏幕推送一条祝酒信息。

app.component.html:

<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Angular PrimeNG Chip Events</h3>
  
<h4>The onImageError Event</h4>
<p-chip (onImageError)="imgError()"
        label="The Image Does not exist" 
        image="gfg.png">
</p-chip>
<p-toast></p-toast>

app.component.ts:

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 msgService: MessageService) { }
  
    imgError() {
        this.msgService.add({
            severity: "error",
            summary: "Chip Image Failed to Load",
            detail: "The Chip onImageError Event"
        })
    }
}

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 { ToastModule } from "primeng/toast";
import { ChipModule } from "primeng/chip";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG芯片事件

例子2：在这个例子中，我们使用了芯片的onRemove事件来显示芯片被移除时的祝酒信息。

app.component.html:

<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Angular PrimeNG Chip Events</h3>
  
<h4>The onRemove Event</h4>
<p-chip (onRemove)="chipRemove()" 
        label="Chip 1" 
        class="mr-3" 
        [removable]="true">
</p-chip>
  
<p-chip (onRemove)="chipRemove()" 
        label="Chip 2" 
        class="mr-3" 
        [removable]="true">
</p-chip>
  
<p-chip (onRemove)="chipRemove()" 
        label="Chip 3" 
        class="mr-3" 
        [removable]="true">
</p-chip>
  
<p-chip (onRemove)="chipRemove()" 
        label="Chip 4" 
        [removable]="true">
</p-chip>
<p-toast></p-toast>

app.component.ts:

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 msgService: MessageService) { }
  
    chipRemove() {
        this.msgService.add({
            severity: "error",
            summary: "Chip Removed",
            detail: "The Chip onRemove Event"
        })
    }
}

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 { ToastModule } from "primeng/toast";
import { ChipModule } from "primeng/chip";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }