How to get started easily with Syncfusion Angular 11 ListView?

This article explains how to easily get started with the EJ2 Listview component in an Angular 11 project with minimal code. The Essential JS2 Angular Listview component is used to represent data in an interactive hierarchical structure interface across different layouts or views. It also includes features such as data-binding, template, grouping, and virtualization. 

Prerequisites

Before starting, the following tools and SDK needs to be installed in your machine to Angular 11 application.

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Installation and application creation

1. You can install Angular CLI 11 using the following command.

npm install -g @angular/cli@11.2.3

ng new angular11-app
cd angular11-app

3. Serve the Angular 11 application using following command.

ng serve  

Adding Angular 11 Listview

1. After running the Angular 11 application successfully, configure the Angular Dialog in this application. Install Angular Dialog and the EJ2 package using the following command.

npm install @syncfusion/ej2-angular-lists

2. You can add the Angular 11 ListView component by using the `ejs-listview` tag, and the attributes used within this tag allow you to define other ListView functionalities.

3. Import ListViewModule into app.module.ts file from the @syncfusion/ej2-angular-lists package.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { ListViewModule } from '@syncfusion/ej2-angular-lists';

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    ListViewModule

  ],

  providers: [],

  bootstrap: [AppComponent]

 

})

 

export class AppModule { }

4. Import the CSS styles of the Listview component.

[styles.css] 

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";

@import "../node_modules/@syncfusion/ej2-angular-lists/styles/material.css";

@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

5. Add the Listview component in the template file.

[app.component.html] 

<ejs-listview id="list" [dataSource]="dataSource"></ejs-listview> 

6. Add the “dataSource” property in the component file.

[app.component.ts] 

export class AppComponent {

dataSource = [

    { id: '1', text: 'Apple' },

    { id: '2', text: 'Microsoft' },

    { id: '1', text: 'Tesla' },

    { id: '1', text: 'Google' },

    { id: '1', text: 'Twitter' },

  ];

} 

ng serve 

Checklist

You can enable checkbox to select multiple items in Listview. To do so, you have to utilize the “showCheckBox” property of the Listview and set it to “true”.

[app.component.html]

<ejs-listview id="list" [dataSource]="dataSource" [showCheckBox]="true"></ejs-listview>

Now, you should see the ListView items with checkboxes enabled for them as in the following image.

Grouplist

You can group each of the Listview items into their own category by utilizing the “groupBy” property of “fields” property in Listview.

[app.component.html]

<ejs-listview id="list" [dataSource]="dataSource" [fields]="fields"></ejs-listview>

[app.component.ts]

export class AppComponent {

  dataSource = [

    { id: '1', text: 'Apple', category: "Electronics" },

    { id: '2', text: 'Samsung', category: "Electronics" },

    { id: '3', text: 'Microsoft', category: "Cloud" },

    { id: '4', text: 'Amazon', category: "Cloud" },

    { id: '5', text: 'Tesla', category: "Automotive" },

    { id: '7', text: 'Rivian', category: "Automotive" },

    { id: '8', text: 'Google', category: "Web" },

    { id: '9', text: 'Twitter', category: "Web" },

  ];

  fields: FieldSettingsModel = { groupBy: 'category' };

}

Virtualization

1. The Essential JS2 Listview is equipped with “Virtualization”, and you can enable it by using the “enableVirtualization” property.
2. Virtualization is a concept of displaying only the information that is currently needed instead of loading everything into the browser. This type of strategy will help ListView load an immense amount of data without sacrificing performance.
3. To use “Virtualization” in Angular 11 ListView, you need to import the “VirtualizationService” service provider into your “app.module.ts” file.

[app.module.ts]

import { ListViewModule, VirtualizationService } from '@syncfusion/ej2-angular-lists';

 

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    ListViewModule

  ],

  providers: [VirtualizationService],

  bootstrap: [AppComponent]

})

export class AppModule { }

[app.component.html]

<ejs-listview id="list" [dataSource]="dataSource" [fields]="fields" [enableVirtualization]="true"></ejs-listview>

Summary

You can learn more about the Angular 11 Listview from the following links.

Checkout Angular 11 Listview features here.

Checkout Angular 11 Listview documentation here.

Conclusion

We hope you enjoyed learning about how to get started easily with Syncfusion Angular 11 ListView.

You can refer to our Angular ListView feature tour page to know about its other groundbreaking feature representations. You can also explore our Angular ListView documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!