Types in Angular Chips component

27 Apr 20247 minutes to read

The ChipList control has the following types.

• Input Chip
• Choice Chip
• Filter Chip
• Action Chip

Input Chip

Input Chip holds information in compact form. It converts user input into chips.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChipListModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'




import { Component, OnInit } from '@angular/core';

@Component({
imports: [
        
        ChipListModule
    ],


standalone: true,
  selector: 'my-app',
  // specifies the template string for the Chip component
  template: `
  <ejs-chiplist id="chip">
    <e-chips>
      <e-chip text="Andrew"></e-chip>
      <e-chip text="Janet"></e-chip>  
      <e-chip text="Laura"></e-chip>
      <e-chip text="Margaret"></e-chip>
    </e-chips>
  </ejs-chiplist>`
})
export class AppComponent {

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Choice Chip

Choice Chip allows you to select a single chip from the set of ChipList/ChipCollection. It can be enabled by setting the selection property to Single.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChipListModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'




import { Component, OnInit } from '@angular/core';

@Component({
imports: [
        
        ChipListModule
    ],


standalone: true,
  selector: 'my-app',
  // specifies the template string for the Chip component
  template: `
  <ejs-chiplist id="chip" selection="Single">
    <e-chips>
      <e-chip text="Small"></e-chip>
      <e-chip text="Medium"></e-chip>
      <e-chip text="Large"></e-chip>
      <e-chip text="Extra Large"></e-chip>
    </e-chips>
  </ejs-chiplist>`
})
export class AppComponent {

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Filter Chip

Filter Chip allows you to select a multiple chip from the set of ChipList/ChipCollection. It can be enabled by setting the selection property to Multiple.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChipListModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'




import { Component, OnInit } from '@angular/core';

@Component({
imports: [
        
        ChipListModule
    ],


standalone: true,
  selector: 'my-app',
  // specifies the template string for the Chip component
  template: `
  <ejs-chiplist id="chip" selection="Multiple">
    <e-chips>
      <e-chip text="Chai"></e-chip>
      <e-chip text="Chang"></e-chip>
      <e-chip text="Aniseed Syrup"></e-chip>
      <e-chip text="Ikura"></e-chip>
    </e-chips>
  </ejs-chiplist>`
})
export class AppComponent {

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Action Chip

The Action Chip triggers the event like click or delete, which helps doing action based on the event.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChipListModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'




import { Component, OnInit } from '@angular/core';
import { ClickEventArgs } from '@syncfusion/ej2-buttons';

@Component({
imports: [
        
        ChipListModule
    ],


standalone: true,
  selector: 'my-app',
  // specifies the template string for the Chip component
  template: `
  <ejs-chiplist id="chip" (click)="chipclick($event)">
    <e-chips>
      <e-chip text="Send a text"></e-chip>
      <e-chip text="Set a remainder"></e-chip>
      <e-chip text="Read my emails"></e-chip>
      <e-chip text="Set alarm"></e-chip>
    </e-chips>
  </ejs-chiplist>
  `
})
export class AppComponent {
  constructor() {}
  chipclick(e: ClickEventArgs) {
   if(e.text){
      alert("you have clicked " + e.text);
   }
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Deletable Chip

Deletable Chip allows you to delete a chip from ChipList/ChipCollection. It can be enabled by setting the enableDelete property to true.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ChipListModule } from '@syncfusion/ej2-angular-buttons'
import { enableRipple } from '@syncfusion/ej2-base'




import { Component, OnInit } from '@angular/core';

@Component({
imports: [
        
        ChipListModule
    ],


standalone: true,
  selector: 'my-app',
  // specifies the template string for the Chip component
  template: `
  <ejs-chiplist id="chip" enableDelete="true">
    <e-chips>
      <e-chip text="Send a text"></e-chip>
      <e-chip text="Set a remainder"></e-chip>
      <e-chip text="Read my emails"></e-chip>
      <e-chip text="Set alarm"></e-chip>
    </e-chips>
  </ejs-chiplist>
  `
})
export class AppComponent {

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));