Get selected items from ListView in Angular ListView component

12 Sep 20255 minutes to read

Users can select single or multiple items in the ListView component. The getSelectedItems method is used to retrieve the selected items from the ListView.

getSelectedItems method

This method retrieves details of the currently selected items from the ListView. It returns either a SelectedItem or a SelectedCollection, depending on the selection mode.

The getSelectedItems method provides the following properties for the selected items:

Return type	Purpose
text	Returns the text of the selected list items.
data	Returns the complete data object of the selected list items, including all mapped fields.
item	Returns the collection of selected list item elements.

app.component.ts

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

@Component({
  imports: [
    ListViewModule
  ],
  standalone: true,
  selector: "my-app",
  template: `
    <ejs-listview
      #listview
      id="sample-list"
      [dataSource]="data"
      [showCheckBox]="true"
      [fields]="fields"
    ></ejs-listview>
    <br />
    <input
      type="button"
      id="btn"
      ejs-button
      value="Get Selected Items"
      (click)="onClick($event)"
    />
    <div #val id="val"></div>
  `
})
export class AppComponent {
  @ViewChild("listview") element: any;
  @ViewChild("val") valEle: any;
  public data: Object = [
    { text: "Hennessey Venom", id: "list-01" },
    { text: "Bugatti Chiron", id: "list-02", isChecked: true },
    { text: "Bugatti Veyron Super Sport", id: "list-03" },
    { text: "SSC Ultimate Aero", id: "list-04", isChecked: true },
    { text: "Koenigsegg CCR", id: "list-05" },
    { text: "McLaren F1", id: "list-06" },
    { text: "Aston Martin One- 77", id: "list-07", isChecked: true },
    { text: "Jaguar XJ220", id: "list-08" }
  ];
  public fields: Object = { id: "id", isChecked: "isChecked" };

  onClick(event: any) {
    let selecteditem = this.element.getSelectedItems();
    this.valEle.nativeElement.innerHTML = "";
    for (let i = 0; i < selecteditem["data"].length; i++) {
      let listData = document.createElement("p");
      listData.innerHTML =
        "text : " +
        selecteditem["text"][i] +
        " , " +
        "id : " +
        selecteditem["data"][i].id;
      this.valEle.nativeElement.append(listData);
    }
  }
}

styles.css

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

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));