Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

ChipListComponent API in Angular Chips API component

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

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

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.

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

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

destroy

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

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

    <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);
        };
    }
Parameter Type Description
fields number | HTMLElement We can pass index number or element of chip.

Returns ChipDataArgs

getSelectedChips

Returns the selected chip(s) data.

    <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

remove

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

    <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]);
        }  
    }
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

select

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

    <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)="select($event)">Select</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 select = function(event: any): void {
            this.ejchip.select([1,3]);
        }  
    }

Returns void

Previous
Next