Angular

Search results

ChipListComponent

Represents the Essential JS 2 Angular ChipList Component.

<ejs-chiplist></ejs-chiplist>

Properties

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 ”

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
`{ [key: string]: string }`

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 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.

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

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><br> @returns {void}<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 {void}

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><br> @returns {void}<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.

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

ChipListComponent

Properties

avatarIconCss string

avatarText string

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

cssClass string

enableDelete boolean

enablePersistence boolean

enableRtl boolean

enabled boolean

htmlAttributes { [key: string]: string }

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>

avatarIconCss
`string`

avatarText
`string`

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

cssClass
`string`

enableDelete
`boolean`

enablePersistence
`boolean`

enableRtl
`boolean`

enabled
`boolean`

htmlAttributes
`{ [key: string]: string }`

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>`