Angular PrimeNG Form Chips Events Component

Angular PrimeNG is an open-source library that consists of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will Angular PrimeNG Form Chips Events Component.

The Form Chips Component in PrimeNG takes the input of many values in a single field. The use of chips can be seen on most e-commerce websites like Flipkart, Amazon, etc.

Angular PrimeNG Form Chips Events:

• onAdd: This event accepts the callback to invoke when a value is added to the Chips component.
• onRemove: The callback passed to this event is invoked when a value is removed.
• onChipClick: This event accepts a callback to invoke when a chip is clicked.
• onFocus: This event accepts a callback that is invoked when the chip input comes into focus.
• onBlur: This event accepts a callback that is invoked when the chip input loses focus.
• onClear: The callback passes to this event is invoked when the chip input field is cleared.

Syntax:

<p-chips 
    [showClear]="..."
    (event-name)="CallbackFunc()"
    [(ngModel)]="...">
</p-chips>

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: This example illustrates the use of the onFocus, onBlur, and the onClear events of the chip input.

• app.component.html:

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>

<h3>Angular PrimeNG Form Chips Events Component</h3>

<p-chips
    (onFocus)="handleFocus()"
    (onBlur)="handleBlur()"
    (onClear)="handleClear()"
    [(ngModel)]="chipsValues">
</p-chips>
<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",
    providers: [MessageService]
})
export class AppComponent {
    constructor(private ms: MessageService) { }
    chipsValues: string[] = [];

    handleFocus() {
        this.ms.add({
            severity: 'success',
            summary: 'Chips Input Focused',
            detail: 'GeeksforGeeks'
        })
    }

    handleBlur() {
        this.ms.add({
            severity: 'info',
            summary: 'Chips Input Out of Focus',
            detail: 'GeeksforGeeks'
        })
    }

    handleClear() {
        this.ms.add({
            severity: 'error',
            summary: 'Chips Input Cleared',
            detail: 'GeeksforGeeks'
        })
    }
}

• 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 { FormsModule } from '@angular/forms';
import { ToastModule } from 'primeng/toast';
import { ChipsModule } from 'primeng/chips';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipsModule,
        ToastModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: This example demonstrates the use of the onAdd, onRemove, and onChipClick events of the chips Input.

• app.component.html:

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h3>Angular PrimeNG Form Chips Events Component</h3>

<p-chips [showClear]="true"
    (onAdd)="handleAdd()"
    (onRemove)="handleRemove()"
    (onChipClick)="handleChipClick()"
    [(ngModel)]="chipsValues">
</p-chips>
<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",
    providers: [MessageService]
})
export class AppComponent {
    constructor(private ms: MessageService) { }
    chipsValues: string[] = [];

    handleAdd() {
        this.ms.add({
            severity: 'success',
            summary: 'Value Added',
            detail: 'GeeksforGeeks'
        })
    }

    handleRemove() {
        this.ms.add({
            severity: 'info',
            summary: 'Value Removed',
            detail: 'GeeksforGeeks'
        })
    }

    handleChipClick() {
        this.ms.add({
            severity: 'error',
            summary: 'Chip Cliked',
            detail: 'GeeksforGeeks'
        })
    }
}

• 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 { FormsModule } from '@angular/forms';
import { ToastModule } from 'primeng/toast';
import { ChipsModule } from 'primeng/chips';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ChipsModule,
        ToastModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Reference: http://primefaces.org/primeng/chips