Search results

Show the list items with icons in Angular MultiSelect component

You can render icons to the list items by mapping the iconCss  fields. This iconCss fields create a span in the list item with mapped class name to allow styling as per your need.

In the following sample, icon classes are mapped with iconCss field.

Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    // specifies the template string for the MultiSelect component
    template: `<ejs-multiselect id='multiselectelement' [dataSource]='data' [fields]='fields' [placeholder]='text'></ejs-multiselect>`
})
export class AppComponent {
    constructor() {
    }
    // defined the array of data
    public data: { [key: string]: Object }[] = [
        { class: 'asc-sort', type: 'Sort A to Z', id: '1' },
        { class: 'dsc-sort', type: 'Sort Z to A ', id: '2' },
        { class: 'filter', type: 'Filter', id: '3' },
        { class: 'clear', type: 'Clear', id: '4' }];
    // map the icon column to iconCSS field.
    public fields: Object = { text: 'type', iconCss: 'class', value: 'id' };
    //set the placeholder to MultiSelect input
    public text: string = 'Select a format';
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, MultiSelectModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

#wrapper {
    width: 250px;
    margin: 0 auto;
}

.e-list-icon{
    line-height: 1.3;
    padding-right: 10px;
    text-indent: 5px;
}

.asc-sort:before {
    content: '\ea91';
    font-family: 'e-icons';  
    font-size: 20px;

}
.dsc-sort:before {
    content: '\ea98';
    font-family: 'e-icons';   
    font-size: 20px;
}
.filter:before {
    content: '\ea77';
    font-family: 'e-icons';  
    font-size: 20px;
    opacity: 0.78;
}
.clear:before {
    content: '\ec0f';
    font-family: 'e-icons';  
    font-size: 20px;
}