Articles in this section
Category / Section

How to get started easily with Syncfusion Angular 8 Listview?

3 mins read

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 8 project with minimal code.

Prerequisites

 

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

 

Installation and application creation

 

You can install Angular CLI 8 using the following command.

npm install -g @angular/cli@8.1.1

 

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

 

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

 

Create an Angular 8 application

 

ng new listview-angular8

cd listview-angular8

 

Installing EJ2 Listview

 

npm install @syncfusion/ej2-angular-lists

 

Serve the application

 

ng serve --open

 

Your application will open in browser in the http://localhost:4200. Refer to the following example screenshot for Angular 8 version.

 

Angular 8 Application

 

Adding Angular 8 Listview

 

You can add the Angular 8 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.

[app.module.ts]

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.

 

[style.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 --open

 

EJ2 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.

EJ2 Listview with Checkbox

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.

EJ2 Listview with Grouped items

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 8 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

 

Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

 

Conclusion

I hope you enjoyed learning about how to get started with Angular 8 ListView.

You can refer to our Angular ListView feature tour page to know about its other groundbreaking feature representations documentation and how to quickly get started for configuration specifications.  You can also explore our Angular ListView example 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied