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

ChipListModel API in Angular Chips API component

Interface for a class ChipList

Properties

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.

    <ejs-chiplist enableDelete="true" selection="Single" (beforeClick)="chipClick($event)">
        <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>
    import { Component, ViewEncapsulation } from '@angular/core';
    import { ClickEventArgs } from '@syncfusion/ej2-buttons';

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        chipClick(e: ClickEventArgs) {
            if(e.text){
                alert("you have selected " + e.text);
            }
        }
    }

click

EmitType<ClickEventArgs>

Triggers when a chip is clicked.

   <ejs-chiplist id="chip" (click)="chipclick($event)">
        <e-chips>
            <e-chip text="Send a text"></e-chip>
            <e-chip text="Set a remainder"></e-chip>
            <e-chip text="Read my emails"></e-chip>
            <e-chip text="Set alarm"></e-chip>
        </e-chips>
    </ejs-chiplist>
    import { Component, ViewEncapsulation } from '@angular/core';
    import { ClickEventArgs } from '@syncfusion/ej2-buttons';

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {q
        chipclick(e: ClickEventArgs) {
            if(e.text){
                alert("you have clicked " + e.text);
            }
        }
    }

created

EmitType<Event>

Triggers when the component is created successfully.

   <ejs-chiplist text="Janet Leverling" (created)="createEvent($event)"></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 {
        createEvent(e: Event){
            alert("Component Rendered Successfully");
        }
    }

delete

EmitType<DeleteEventArgs>

Fires before removing the chip element.

    <ejs-chiplist id="chip-avatar" enableDelete="true" (delete)="deleteEvent($event)">
        <e-chips>
            <e-chip text="Anne"></e-chip>
        </e-chips>
    </ejs-chiplist>
    import { Component, ViewEncapsulation } from '@angular/core';
    import { DeleteEventArgs } from '@syncfusion/ej2-buttons';

    @Component({
        selector: 'app-root',
        templateUrl: 'app.component.html',
        styleUrls: ['app.component.css'],
        encapsulation: ViewEncapsulation.None
    })
    export class AppComponent {
        deleteEvent(e: DeleteEventArgs) {
            if(e.text){
                alert("you have deleted " + e.text);
            }
        }
    }

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.

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.

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

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

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

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

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.

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

enablePersistence

boolean

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

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enabled

boolean

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

htmlAttributes

{ : }

Allows additional HTML attributes such as aria labels, title, name, etc., and accepts n number of attributes in a key-value pair format.

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

leadingIconUrl

string

Specifies the leading icon url for the chip.

locale

string

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

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

selection

Selection

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

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

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

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

trailingIconUrl

string

Specifies the trailing icon url for the chip.

Previous
Next