Angular PrimeNG Chip Events

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for various tasks like inputs, menus, charts, Buttons, etc. In this article, we will see Angular PrimeNG Chip Events.

The Chip component represents entities using text, icons, and images in a well-defined structure. There are 2 events onRemove and onImageError for the chip component. 

Angular PrimeNG Chip Events:

• onRemove: This event is triggered when the chip component is removed by clicking the chip’s remove icon.
• onImageError: This event is triggered when there is an image specified for the chip fails to load.

Angular PrimeNG Chip Events Properties:

• label: This property is used to specify the chip label.
• image: This property is used to specify the chip image.
• removable: This property specifies if the chip is removable or not.

Syntax:

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

Creating Angular Application and Installing the Module:

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

ng new appname

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

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we used the onImageError event of the chip, and if the Image of the chip fails to load we push a toast message to the user’s screen using message service.

• app.component.html:

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:

Javascript

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:

Javascript

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 { }

Output:

Example 2: In this example, we used the onRemove event of the chip to show a toast message when the chip is removed.

• app.component.html:

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:

Javascript

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:

Javascript

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 { }

Output:

Reference: https://www.primefaces.org/primeng/chip