A chip component is a small block of essential information, mostly used on contacts or filter tags.
<div id="chip"></div>
<script>
var chipObj = new ChipList();
chipObj.appendTo("#chip");
</script>
string
Specifies the icon CSS class for the avatar in the chip.
<div id="chip"></div>
<style>
#chip .anne {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/anne.png')
}
</style>
import { ChipList } from '@syncfusion/ej2-buttons';
new ChipList({chips: [{
"text": "Anne",
"avatarIconCss": "anne"
}]}, '#chip');
Defaults to ”
string
Specifies the customized text value for the avatar in the chip.
<div id="chip"></div>
import { ChipList } from '@syncfusion/ej2-buttons';
new ChipList({chips: [{
"text": "Andrew",
"avatarText": "A"
}]}, '#chip');
Defaults to ”
string[]
| number[]
| ChipModel[]
This chips property helps to render ChipList component.
<div id="chip"></div>
import { ChipList } from '@syncfusion/ej2-buttons';
new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret']}, '#chip');
Defaults to []
string
Specifies the custom classes to be added to the chip element used to customize the ChipList component.
<div id="chip"></div>
import { ChipList } from '@syncfusion/ej2-buttons';
new ChipList({chips: ['Janet Leverling'], cssClass: "e-outline"
}, '#chip');
Defaults to ”
boolean
Enables or disables the delete functionality of a chip.
<div id="chip"></div>
import { ChipList } from '@syncfusion/ej2-buttons';
new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'],enableDelete: true}, '#chip');
Defaults to false
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Specifies a value that indicates whether the chip component is enabled or not.
Defaults to true
{ : }
Allows additional HTML attributes such as aria labels, title, name, etc., and accepts n number of attributes in a key-value pair format.
Defaults to {}
string
Specifies the leading icon CSS class for the chip.
<div id="chip"></div>
<style>
#chip .janet {
background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
}
</style>
import { ChipList } from '@syncfusion/ej2-buttons';
new ChipList({chips: [{
"text": "Janet",
"leadingIconCss": "janet"
}]}, '#chip');
Defaults to ”
string
Specifies the trailing icon url for the chip.
Defaults to ”
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
string[]
| number[]
| number
Sets or gets the selected chip items in the chip list.
<div id="chip"></div>
import { ChipList } from '@syncfusion/ej2-buttons';
new ChipList({ chips: ['Send a text', 'Set a remainder', 'Read my emails ', 'Set alarm'], selection: 'Multiple', selectedChips: [1, 3] }, '#chip');
Defaults to []
Defines the selection type of the chip. The available types are:
Defaults to ‘None’
string
Specifies the text content for the chip.
<div id="chip"></div>
import { ChipList } from '@syncfusion/ej2-buttons';
new ChipList({chips: [{
"text": "Anne",
}]}, '#chip');
Defaults to ”
string
Specifies the trailing icon CSS class for the chip.
<div id="chip"></div>
import { ChipList } from '@syncfusion/ej2-buttons';
new ChipList({chips: [{
"text": "Margaret",
"trailingIconCss": "e-dlt-btn"
}]}, '#chip');
Defaults to ”
string
Specifies the trailing icon url for the chip.
Defaults to ”
Allows adding the chip item(s) by passing a single or array of string, number, or ChipModel values.
Parameter | Type | Description |
---|---|---|
chipsData | string[] | number[] | ChipModel[] | string | number | ChipModel |
We can pass array of string or array of number or array of chip model or string data or number data or chip model. |
Returns void
Adds the handler to the given event listener.
Parameter | Type | Description |
---|---|---|
eventName | string |
A String that specifies the name of the event |
handler | Function |
Specifies the call to run when the event occurs. |
Returns void
Appends the control within the given HTML element
Parameter | Type | Description |
---|---|---|
selector (optional) | string | HTMLElement |
Target element where control needs to be appended |
Returns void
Adding unload event to persist data when enable persistence true
Returns void
When invoked, applies the pending property changes immediately to the component.
Returns void
Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.
<div id="chip"></div>
import { ChipList } from '@syncfusion/ej2-buttons';
let chip =new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret']},'#chip');
chip.destroy();
Returns void
Removing unload event to persist data when enable persistence true
Returns void
A function that finds chip based on given input.
Parameter | Type | Description |
---|---|---|
fields | number | HTMLElement |
We can pass index number or element of chip. |
Returns ChipDataArgs
Returns the persistence data for component
Returns any
Returns the route element of the component
Returns HTMLElement
Returns the selected chip(s) data.
import { ChipList } from '@syncfusion/ej2-buttons';
let chip =new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'],selection:'Multiple', selectedChips: [1, 3]},'#chip');
alert('Selected items : '+chip.getSelectedChips().data);
Returns SelectedItem | SelectedItems | undefined
Handling unload event to persist data when enable persistence true
Returns void
Applies all the pending property changes and render the component again.
Returns void
Allows removing the chip item(s) by passing a single or array of string, number, or ChipModel values.
Parameter | Type | Description |
---|---|---|
fields | number | number[] | HTMLElement | HTMLElement[] |
We can pass number or array of number or chip element or array of chip element. |
<div id="chip"></div>
import { ChipList } from '@syncfusion/ej2-buttons';
let chip =new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret']},'#chip');
chip.remove([0]);
```<br> |
Returns *void*
### removeEventListener
Removes the handler from the given event listener.
| Parameter | Type | Description |
|------|------|-------------|
| eventName | `string` | A String that specifies the name of the event to remove |
| handler | `Function` | Specifies the function to remove |
Returns *void*
### select
Allows selecting the chip item(s) by passing a single or array of string, number, or ChipModel values.
Returns *void*
### Inject
Dynamically injects the required modules to the component.
| Parameter | Type | Description |
|------|------|-------------|
| moduleList | `Function[]` | ? |
Returns *void*
## Events
<h3 class="doc-prop-wrapper" id="beforeclick" data-Path="beforeclick-beforeClick">
<a href="#beforeclick" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>beforeClick</span>
<span class="doc-prop-type"> [`EmitType<ClickEventArgs>`](./clickEventArgs)
</span>
</h3>
Triggers before the click event of the chip is fired.
This event can be used to prevent the further process and restrict the click action over a chip.
```html
<div id="chip"></div>
import { ChipList, ClickEventArgs } from '@syncfusion/ej2-buttons';
new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'], selection: "Single",
beforeClick: (e: ClickEventArgs)=>{
alert('you have selected ' + e.text)
}
}, '#chip');
Triggers when a chip is clicked.
<div id="chip"></div>
import { ChipList, ClickEventArgs } from '@syncfusion/ej2-buttons';
new ChipList({chips: ['Send a text', 'Set a remainder', 'Read my emails ', 'Set alarm'],
click: (e: ClickEventArgs)=>{
alert('you have clicked ' + e.text)
}
}, '#chip');
EmitType<Event>
Triggers when the component is created successfully.
<div id="chip"></div>
import { ChipList } from '@syncfusion/ej2-buttons';
new ChipList({chips: ['Janet Leverling'],
created: (e: Event)=>{
alert('Component rendered successfully')
}
}, '#chip');
Fires before removing the chip element.
<div id="chip"></div>
import { ChipList, DeleteEventArgs } from '@syncfusion/ej2-buttons';
new ChipList({chips: ['Andrew', 'Janet', 'Laura', 'Margaret'],enableDelete: true,
delete: (e: DeleteEventArgs)=>{
alert('you have deleted ' + e.text)
}
}, '#chip');
EmitType<ChipDeletedEventArgs>
Triggers when the chip item is removed.