Icons and templates in Angular List box component
27 Apr 20245 minutes to read
Icons
To place the icon on a list box, set the iconCss
property to e-icons
with the required icon CSS. By default, the icon is positioned to the left side of the list.
In the following sample, icon classes are mapped with iconCss
field.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import{ ListBoxAllModule} from '@syncfusion/ej2-angular-dropdowns'
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, ReactiveFormsModule, ListBoxAllModule
],
standalone: true,
selector: 'app-container',
template: `<div class="e-section-control">
<ejs-listbox [dataSource]="data" [fields]="setfield"></ejs-listbox></div>`
})
export class AppComponent{
public data: { [key: string]: Object }[] = [
{ text: 'Account Settings', iconCss: 'e-list-icons e-list-user-settings' },
{ text: 'Address Book', iconCss: 'e-list-icons e-list-address-book' },
{ text: 'Delete', iconCss: 'e-list-icons e-list-delete' },
{ text: 'Forward', iconCss: 'e-list-icons e-list-forward' },
{ text: 'Reply', iconCss: 'e-list-icons e-list-reply' },
{ text: 'Reply All', iconCss: 'e-list-icons e-list-reply-all' },
{ text: 'Save All Attachments', iconCss: 'e-list-icons e-list-save-all-attachments' },
{ text: 'Save As', iconCss: 'e-list-icons e-list-icon-save-as' },
{ text: 'Touch/Mouse Mode', iconCss: 'e-list-icons e-list-touch' },
{ text: 'Undo', iconCss: ' e-list-icons e-list-undo' }
];
public setfield = { iconCss: "iconCss" }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Templates
ListBox items can be customized according to the requirement using itemTemplate
property.
In the following sample, the items in the cart are displayed using list box template,
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { ListBoxComponent, ListBoxAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons'
import { Component } from '@angular/core';
@Component({
imports: [
FormsModule, ReactiveFormsModule, ListBoxAllModule
],
standalone: true,
selector: 'app-container',
templateUrl: 'template.html',
})
export class AppComponent {
public data?: { [key: string]: Object }[];
ngOnInit():void{
this.data = [
{ text: 'JavaScript', pic: 'javascript', description: 'It is a lightweight interpreted or JIT-compiled programming language.' },
{ text: 'TypeScript', pic: 'typeScript', description: 'It is a typed superset of Javascript that compiles to plain JavaScript.' },
{ text: 'Angular', pic: 'angular', description: 'It is a TypeScript-based open-source web application framework.' },
{ text: 'React', pic: 'react', description: 'A JavaScript library for building user interfaces. It can also render on the server using Node.' },
{ text: 'Vue', pic: 'vue', description: 'A progressive framework for building user interfaces. it is incrementally adoptable.' }
];
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<div class="e-section-control">
<ejs-listbox [dataSource]="data"
itemTemplate= '<div class="list-wrapper">
<span class="${pic} e-avatar e-avatar-xlarge e-avatar-circle">
</span><span class="text">${text}</span>
<span class="description">${description}</span>
</div>'>
</ejs-listbox>
</div>