We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 ListView?

Platform: Angular - EJ 2 |
Control: ListView

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

Prerequisites

 

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

Installation and application creation

 

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

 

npm install -g @angular/cli@11.2.3

 

Note:

To follow and run the application in Angular 6 or earlier version, you can replace the CLI command version with your preferred version and install it.

 

npm install -g @angular/cli@<CLI VERSION>

 

  1. Create an Angular 11 application using Angular cli.

 

ng new angular11-app

cd angular11-app

 

  1. Serve the Angular 11 application using following command.

 

ng serve 

 

Listen the application in localhost:4200. Your application will serve in browser. Refer the below example screenshot for Angular 11 version.

Angular-app

 

Adding Angular 11 Listview

 

  1. After running the Angular 11 application successfully, configure the Angular Dialog in this application. Install Angular Dialog and EJ2 package using following command. 
    npm install @syncfusion/ej2-angular-lists
    
    

 

  1. You can add the Angular 11 Listview component by using `ejs-listview` tag and the attributes used within this tag allows you to define other Listview functionalities.

 

  1. 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 { }

 

  1. 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";

 

  1. Add the Listview component in the template file.

 

[app.component.html]

 

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

 

  1. Add the “dataSource” property in 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' },

  ];

}

 

  1. Run the application with the following command and you should the see the below represented output of the EJ2 Angular Listview component.

 

ng serve 

 

listview

 

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 Listivew items with checkbox enabled to them as in the following image.

Checklist

 

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

}

 

After modifying the code like above snippet, you should see the Grouplist in the browser as in the following image.

GroupList

Virtualization

 

The Essential JS2 Listview is equipped with “Virtualization” and you can enable it by using the “enableVirtualization” property.

Virtualization is a concept of displaying only the information that is currently needed instead of loading everything into browser. This type of strategy will help Listview to load immense amount of data without sacrificing performance.

To use “Virtualization” in Angular 11 Listview you need  to import “VirtualizationService” service provider into you “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.

 

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

 

2X faster development

The ultimate Angular UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile