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.

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

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

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

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