Search results

Get Selected Items in The ListView Component in Angular Listview component

Single or many items can be selected by users in the ListView component. An API is used to get selected items from the list items. This is called as the getSelectedItems method.

getSelectedItems method

This is used to get the details of the currently selected item from the list items. It returns the SelectedItem | SelectedCollection

The getSelectedItems method returns the following items from the selected list items.

Return type Purpose
text Returns the text of selected item lists
data Returns the whole data of selected list items, i.e., returns the fields data of selected li.
item Returns the collections of list items
Source
Preview
app.component.ts
app.module.ts
main.ts
index.css
import { Component, ViewChild } from "@angular/core";

@Component({
  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) {
    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);
    }
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ListViewModule
    ],
    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%;
}

#sample-list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}