Search results

Show the list items with icons in Angular MultiSelect component

08 Apr 2021 / 1 minute to read

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
Copied to clipboard
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';
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
#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;
}