Search results

ChipList API in Angular Chips API component

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>

Properties

avatarIconCss

string

Specifies the icon CSS class for the avatar in the chip.

Defaults to

avatarText

string

Specifies the customized text value for the avatar in the chip.

Defaults to

chips

string[] | number[] | ChipModel[]

This chips property helps to render ChipList component.

Defaults to []

cssClass

string

Specifies the custom classes to be added to the chip element used to customize the ChipList component.

Defaults to

enableDelete

boolean

Enables or disables the delete functionality of a chip.

Defaults to false

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled

boolean

Specifies a value that indicates whether the chip component is enabled or not.

Defaults to true

leadingIconCss

string

Specifies the leading icon CSS class for the chip.

Defaults to

leadingIconUrl

string

Specifies the trailing icon url for the chip.

Defaults to

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

selectedChips

string[] | number[] | number

Sets or gets the selected chip items in the chip list.

Defaults to []

selection

string

Defines the selection type of the chip. The available types are:

  1. Input chip
  2. Choice chip
  3. Filter chip
  4. Action chip

Defaults to ‘None’

text

string

Specifies the text content for the chip.

Defaults to

trailingIconCss

string

Specifies the trailing icon CSS class for the chip.

Defaults to

trailingIconUrl

string

Specifies the trailing icon url for the chip.

Defaults to

Methods

add

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

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

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

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.

Returns void

find

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

getRootElement

Returns the route element of the component

Returns HTMLElement

getSelectedChips

Returns the selected chip(s) data.

Returns SelectedItem | SelectedItems

refresh

Applies all the pending property changes and render the component again.

Returns void

remove

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.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

select

Allows selecting the chip item(s) by passing a single or array of string, number, or ChipModel values.

Parameter Type Description
fields number | number[] | HTMLElement | HTMLElement[] | string[] We can pass number or array of number
or chip element or array of chip element.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

beforeClick

EmitType<ClickEventArgs>

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.

click

EmitType<ClickEventArgs>

Triggers when a chip is clicked.

created

EmitType<Event>

Triggers when the component is created successfully.

delete

EmitType<DeleteEventArgs>

Fires before removing the chip element.