Check list in Angular ListView component

12 Sep 20255 minutes to read

The ListView supports checkboxes in default and group lists, enabling selection of multiple items. The checkbox functionality can be enabled using the showCheckBox property.

Checkboxes are useful in scenarios where multiple item selection is required. For example, in a shopping cart, users can select or unselect desired items before checkout. Checkboxes are also beneficial for selecting multiple items that belong to the same category using group lists.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { Component } from '@angular/core';

@Component({
    imports: [
        ListViewModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `<ejs-listview id='sample-list' [dataSource]='data' [fields]='fields' [showCheckBox]='true' headerTitle='To Do List' showHeader='true'></ejs-listview>`,
})

export class AppComponent {
    public data: Object = [
        { text: 'Do Meditation', id: '1' },
        { text: 'Go Jogging', id: '2' },
        { text: 'Buy Groceries', id: '3' },
        { text: 'Pay Phone bill', id: '4' },
        { text: 'Play Football with your friends', id: '5' },
    ];
    public fields: Object = { text: 'text', id: 'id' };
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

#sample-list {
    display: block;
    max-width: 400px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
  }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Checkbox Position

In ListView, the checkbox can be positioned on either the Left or Right side of the list item text.
This can be achieved using the checkBoxPosition property. By default, the checkbox is positioned to the Left of the list item text.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { Component } from '@angular/core';

@Component({
    imports: [
        ListViewModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `<ejs-listview id='sample-list' [dataSource]='data' [fields]='fields' [showCheckBox]='true' [checkBoxPosition]="position"></ejs-listview>`,
})

export class AppComponent {
    public data: Object = [
        { 'text': 'Hennessey Venom', 'id': 'list-01' },
        { 'text': 'Bugatti Chiron', 'id': 'list-02' },
        { 'text': 'Bugatti Veyron Super Sport', 'id': 'list-03' },
        { 'text': 'SSC Ultimate Aero', 'id': 'list-04' },
        { 'text': 'Koenigsegg CCR', 'id': 'list-05' },
        { 'text': 'McLaren F1', 'id': 'list-06' },
        { 'text': 'Aston Martin One- 77', 'id': 'list-07' },
        { 'text': 'Jaguar XJ220', 'id': 'list-08' },
        { 'text': 'McLaren P1', 'id': 'list-09' },
        { 'text': 'Ferrari LaFerrari', 'id': 'list-10' }
    ];
    public fields: Object = { text: 'text', id: 'id' };
    public position = 'Right';
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';

#sample-list {
    display: block;
    max-width: 400px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));