Angular

Search results

ChipListComponent

Represents the Essential JS 2 Angular ChipList Component.

<ejs-chiplist></ejs-chiplist>

Properties

allowDragAndDrop
`boolean`

Specifies a boolean value that indicates whether the chip item can be dragged and reordered. This enables drag-and-drop functionality within a single container or across multiple containers of chips when dragging is enabled.

Defaults to false

avatarIconCss
`string`

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

    <ejs-chiplist id="chip" text="Janet Leverling" [avatarIconCss]="Icon"></ejs-chiplist>
    <style>
        #chip .anne {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/anne.png')
        }
    </style>

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

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        public Icon = "anne";
    }

Defaults to ”

avatarText
`string`

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

    <ejs-chiplist text="Janet Leverling" [avatarText]= 'text'></ejs-chiplist>

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

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        public text = 'J';
    }

Defaults to ”

chips
`string[]` | `number[]` | `ChipModel[]`

This chips property helps to render ChipList component.

    <ejs-chiplist id="chip-avatar">
        <e-chips>
            <e-chip text="Anne"></e-chip>
            <e-chip text="Janet"></e-chip>
            <e-chip text="Laura"></e-chip>
            <e-chip text="Margaret"></e-chip>
        </e-chips>
    </ejs-chiplist>

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

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {}

Defaults to []

cssClass
`string`

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

    <ejs-chiplist text="Janet Leverling" [cssClass]="style"></ejs-chiplist>

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

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        public style = "e-outline";
    }

Defaults to ”

dragArea
`HTMLElement` | `string`

Specifies the target in which the draggable element can be moved and dropped. By default, the draggable element movement occurs in the page.

Defaults to null

enableDelete
`boolean`

Enables or disables the delete functionality of a chip.

    <ejs-chiplist id="chip-avatar" [enableDelete]="bool">
        <e-chips>
            <e-chip text="Anne"></e-chip>
        </e-chips>
    </ejs-chiplist>

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

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        public bool = "true";
    }

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

htmlAttributes
{ : }

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

leadingIconCss
`string`

Specifies the leading icon CSS class for the chip.

    <ejs-chiplist id="chip" text="Janet Leverling" [leadingIconCss]="Icon"></ejs-chiplist>
    <style>
        #chip .janet {
            background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
        }
    </style>

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

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        public Icon = "janet";
    }

Defaults to ”

leadingIconUrl
`string`

Specifies the leading 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.

    <ejs-chiplist id="chip-filter" selection="Multiple" [selectedChips]="this.filterSelected">
        <e-chips>
            <e-chip text="Extra small"></e-chip>
            <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>

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

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        filterSelected = [1, 3];
    }

Defaults to []

selection
`Selection`

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

Input chip
Choice chip
Filter chip
Action chip

Defaults to ‘None’

text
`string`

Specifies the text content for the chip.

    <ejs-chiplist [text]="name"></ejs-chiplist>

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

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        public name = "Janet Leverling";
    }

Defaults to ”

trailingIconCss
`string`

Specifies the trailing icon CSS class for the chip.

    <ejs-chiplist text="Janet Leverling" [trailingIconCss]= 'Icon'></ejs-chiplist>

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

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        public Icon = "e-dlt-btn";
    }

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.

    <ejs-chiplist #ejchip 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>
    <div class="btn"><button class="e-control e-btn" (click)="add($event)">Add Item</button></div>

    import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
    import { ChipList } from '@syncfusion/ej2-buttons';
    import { ChipListComponent } from '@syncfusion/ej2-angular-buttons';

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        @ViewChild('ejchip')
        public ejchip: ChipListComponent;
        public add = function(event: any): void {
            this.ejchip.add('jenifer');
        }  
    }
```<br> |

Returns *void*

### destroy

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

```html
    <ejs-chiplist #ejchip 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>
    <div class="btn"><button class="e-control e-btn" (click)="destroy($event)">Destroy</button></div>

    import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
    import { ChipList } from '@syncfusion/ej2-buttons';
    import { ChipListComponent } from '@syncfusion/ej2-angular-buttons';

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        @ViewChild('ejchip')
        public ejchip: ChipListComponent;
        public destroy = function(event: any): void {
            this.ejchip.destroy();
        }  
    }

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.

    <ejs-chiplist #ejchip id="chip" selection="Multiple" [selectedChips]="this.filterSelected">
        <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>
    <div class="btn"><button class="e-control e-btn" (click)="find()">Show</button></div>

    import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
    import { ChipList } from "@syncfusion/ej2-buttons";
    import { ChipListComponent } from "@syncfusion/ej2-angular-buttons";

    @Component({
        selector: "app-root",
        templateUrl: "app.component.html",
        styleUrls: ["app.component.css"],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        @ViewChild("ejchip")
        public ejchip: ChipListComponent;
        filterSelected = [1, 3];
        public find = function(event: any): void {
            let name = this.ejchip.find([3]).text;
            alert('you have searched for ' +name);
        };
    }
```<br> |

Returns [*ChipDataArgs*](./chipDataArgs)

### getSelectedChips

Returns the selected chip(s) data.

```html
    <ejs-chiplist #ejchip id="chip" selection="Single" [selectedChips]="this.filterSelected">
        <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>
    <div class="btn"><button class="e-control e-btn" (click)="getSelectedChips()">Show</button></div>

    import { Component, ViewEncapsulation, ViewChild } from "@angular/core";
    import { ChipList } from "@syncfusion/ej2-buttons";
    import { ChipListComponent } from "@syncfusion/ej2-angular-buttons";

    @Component({
        selector: "app-root",
        templateUrl: "app.component.html",
        styleUrls: ["app.component.css"],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        @ViewChild("ejchip")
        public ejchip: ChipListComponent;
        filterSelected = [2];
        public getSelectedChips = function(event: any): void {
        let name = this.ejchip.getSelectedChips().text;
        alert('Selected chip is ' +name);
    };
}

Returns SelectedItem | SelectedItems | undefined

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.

    <ejs-chiplist #ejchip id="chip" selection="Multiple">
        <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>
    <div class="btn"><button class="e-control e-btn" (click)="remove($event)">Remove</button></div>

    import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
    import { ChipList } from '@syncfusion/ej2-buttons';
    import { ChipListComponent } from '@syncfusion/ej2-angular-buttons';

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        @ViewChild('ejchip')
        public ejchip: ChipListComponent;
        public remove = function(event: any): void {
            this.ejchip.remove([0]);
        }  
    }
```<br> |

Returns *void*

### select

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

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');

click
`EmitType<ClickEventArgs>`

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');

created
`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');

delete
`EmitType<DeleteEventArgs>`

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');

deleted
`EmitType<ChipDeletedEventArgs>`

Triggers when the chip item is removed.

dragStart
`EmitType<DragAndDropEventArgs>`

Fires when a chip item starts moving due to a drag action.

dragStop
`EmitType<DragAndDropEventArgs>`

Fires when a chip item is reordered after completing a drag action.

dragging
`EmitType<DragAndDropEventArgs>`

Fires while a chip item is being dragged.

ChipListComponent

Properties

allowDragAndDrop boolean

avatarIconCss string

avatarText string

chips string[] | number[] | ChipModel[]

cssClass string

dragArea HTMLElement | string

enableDelete boolean

enablePersistence boolean

enableRtl boolean

enabled boolean

htmlAttributes { : }

leadingIconCss string

leadingIconUrl string

locale string

selectedChips string[] | number[] | number

selection Selection

text string

trailingIconCss string

trailingIconUrl string

Methods

add

find

remove

click EmitType<ClickEventArgs>

created EmitType<Event>

delete EmitType<DeleteEventArgs>

deleted EmitType<ChipDeletedEventArgs>

dragStart EmitType<DragAndDropEventArgs>

dragStop EmitType<DragAndDropEventArgs>

dragging EmitType<DragAndDropEventArgs>

allowDragAndDrop
`boolean`

avatarIconCss
`string`

avatarText
`string`

chips
`string[]` | `number[]` | `ChipModel[]`

cssClass
`string`

dragArea
`HTMLElement` | `string`

enableDelete
`boolean`

enablePersistence
`boolean`

enableRtl
`boolean`

enabled
`boolean`

htmlAttributes
{ : }

leadingIconCss
`string`

leadingIconUrl
`string`

locale
`string`

selectedChips
`string[]` | `number[]` | `number`

selection
`Selection`

text
`string`

trailingIconCss
`string`

trailingIconUrl
`string`

click
`EmitType<ClickEventArgs>`

created
`EmitType<Event>`

delete
`EmitType<DeleteEventArgs>`

deleted
`EmitType<ChipDeletedEventArgs>`

dragStart
`EmitType<DragAndDropEventArgs>`

dragStop
`EmitType<DragAndDropEventArgs>`

dragging
`EmitType<DragAndDropEventArgs>`