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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 6 and ListView

Platform: JavaScript - EJ 2 |
Control: ListView |
Published Date: November 29, 2018 |
Last Revised Date: November 6, 2019

ListView Angular component represent data in interactive hierarchical structure interface across different layouts or views, that also has the features of data-binding, template rendering, and grouping.

Prerequisites

 Before start, ensure below items configured to create Angular ListView in Angular 6 application

Node.js (latest version)

Angular 6

Angular CLI

Visual Studio Code for Editor.

 

Installation and application creation

 

Install Angular CLI 6 using following command.

 

npm install @angular/cli@6.0.3 -g

 

npm

 

Create a simple Angular 6 application using below command

 

ng new ListProj

 

The Angular dependencies are installed while creating the project. Now change the directory to application’s root folder and serve the Angular CLI application with below commands.

 

cd ListProj
 
ng serve -o

 

Listen the application in localhost. Your application will serve in browser as follows.

sample

Integration of ListView

 

  • After running the Angular 6 application successfully, configure the ListView in this application. Install EJ2 ListView dependencies using following command.
    npm install @syncfusion/ej2-angular-lists --save
    

 

  • Import ListViewModule from installed package in app/app.module.ts. Refer to the below code snippet.

 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, ListViewModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 
 

 

  • Refer the CSS file for ListView in styles.CSS file.

 

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

 

  • Add the Angular ListView component in app.component.html. Refer below code snippet to initialize and bind the dataSource for ListView.

 

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

 

  • Now, define the data for this ListView in app.component.ts. Here, the JSON data is used for the ListView.
    export class AppComponent {
      public data: Object = [
        {
            'text': 'Display',
            'id': 'list-01'
        },
        {
            'text': 'Notification',
            'id': 'list-02'
        },
        {
            'text': 'Sound',
            'id': 'list-03'
        },
        {
            'text': 'Apps',
            'id': 'list-04'
        },
        {
            'text': 'Storage',
            'id': 'list-05'
        },
        {
            'text': 'Battery',
            'id': 'list-06'
        }
    ];
     
     
    }
     
    

 

  • Now serve the application using following command.
    ng serve -o
    

 

Once all the files are compiled successfully, it will serve the application at localhost. The following screenshot illustrates ListView.

listview

 

Enabling Features


This section describes how to enable the ListView component features. 

CheckBox Feature

 

To enable checkbox in ListView, set the showCheckBox property to true.

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

 

And, we need to add the Button component styles in styles.css file to render the CheckBox in ListView.

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

 

lictview checkBox

Grouping Feature

 

ListView supports to group the data based on data category.

The category of each list item can be mapped with groupBy field in the data table and which supports single-level navigation.

Refer to the below code snippet to map groupBy property in fields of ListView.

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

 

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data: Object = [
    {
        'text': 'Display',
        'id': 'list-01',
        'category': 'Device1'
    },
    {
        'text': 'Notification',
        'id': 'list-02',
        'category': 'Device1'
    },
    {
        'text': 'Sound',
        'id': 'list-03',
        'category': 'Device1'
    },
    {
        'text': 'Apps',
        'id': 'list-04',
        'category': 'Device2'
    },
    {
        'text': 'Storage',
        'id': 'list-05',
        'category': 'Device2'
    },
    {
        'text': 'Battery',
        'id': 'list-06',
        'category': 'Device2'
    }
];
public fields : Object = { text: 'text', id: 'id', groupBy: 'category'}
}
 

 

Grouping Feature

Nested List Feature

 

ListView component supports Nested list items. For that, define child property in array of JSON.

The below samples illustrate, how the list is generated with the nested element.

<ejs-listview id='sample-list' [dataSource]='data' [fields]='fields' [showHeader]='true' headerTitle='Continent'></ejs-listview>
 

 

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data: Object = [
    {
        'text': 'Asia',
        'id': '01',
        'category': 'Continent',
        'child': [{
            'text': 'India',
            'id': '1',
            'category': 'Asia',
            'child': [{
                'text': 'Delhi',
                'id': '1001',
                'category': 'India',
            },
            {
                'text': 'Kashmir',
                'id': '1002',
                'category': 'India',
            },
            {
                'text': 'Goa',
                'id': '1003',
                'category': 'India',
            },
            ]
        },
        {
            'text': 'China',
            'id': '2',
            'category': 'Asia',
            'child': [{
                'text': 'Zhejiang',
                'id': '2001',
                'category': 'China',
            },
            {
                'text': 'Hunan',
                'id': '2002',
                'category': 'China',
            },
            {
                'text': 'Shandong',
                'id': '2003',
                'category': 'China',
            }]
        }]
    },
];
public fields : Object = { text: 'text', id: 'id'}
}
 
 

 

Here I have appended single level data to ListView. Refer this link for whole data.

nested list

Refer to the below screenshot for Nested Child data.

nested list

Template Feature

 

ListView items can be customized with the help of the template property.

To customize list items in your application, set your customized template element inside ng-template directive.

NOTE: Also, we provided the built-in CSS classes to customize the list-items. Refer to this link.

Refer to the below code snippet to render the Customized ListView.

[app.component.html]

<div id="sample">
  <ejs-listview id='List' [dataSource]='data' headerTitle='Contacts' cssClass='e-list-template' [showHeader]='true' sortOrder='Ascending'>
      <ng-template #template let-data="">
          <div class="e-list-wrapper e-list-multi-line e-list-avatar">
              <span class="e-avatar e-avatar-circle" *ngIf="data.avatar !== ''">{{data.avatar}}</span>
              <span class="{{data.pic}} e-avatar e-avatar-circle" *ngIf="data.pic !== '' "> </span>
              <span class="e-list-item-header">{{data.text}}</span>
              <span class="e-list-content">{{data.contact}}</span>
          </div>
      </ng-template>
  </ejs-listview>
</div>
 

 

In this template sample, we used our Syncfusion Avatar component to render the image in ListView. So, we need to refer the Layout component CSS files in application. To do that, install Avatar components dependencies with below command and refer the CSS in styles.css file.

npm install @syncfusion/ej2-layouts --save

 

[styles.css]

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

 

[app.component.ts]

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public data: { [key: string]: Object; }[] = [
    {
      text: "Jenifer",
      contact: "(206) 555-985774",
      id: "1",
      avatar: "",
      pic: "pic01"
    },
    { text: "Amenda", contact: "(206) 555-3412", id: "2", avatar: "A", pic: "" },
    {
      text: "Isabella",
      contact: "(206) 555-8122",
      id: "4",
      avatar: "",
      pic: "pic02"
    },
    {
      text: "William ",
      contact: "(206) 555-9482",
      id: "5",
      avatar: "W",
      pic: ""
    },
    {
      text: "Jacob",
      contact: "(71) 555-4848",
      id: "6",
      avatar: "",
      pic: "pic04"
    },
    { text: "Matthew", contact: "(71) 555-7773", id: "7", avatar: "M", pic: "" },
    {
      text: "Oliver",
      contact: "(71) 555-5598",
      id: "8",
      avatar: "",
      pic: "pic03"
    },
    {
      text: "Charlotte",
      contact: "(206) 555-1189",
      id: "9",
      avatar: "C",
      pic: ""
    }
  ];
  
}
 

 

[app.component.css]

#List {
    margin: 0 auto;
    font-size: 15px;
    border: 1px solid #ccc;
  }
  
  .pic01 {
    background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/1.png");
  }
  
  .pic02 {
    background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/3.png");
  }
  
  .pic03 {
    background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/5.png");
  }
  
  .pic04 {
    background-image: url("https://ej2.syncfusion.com/demos/src/grid/images/2.png");
  }
  
  #List .e-list-item:nth-child(1) .e-avatar {
    background-color: #039be5;
  }
  
  #List .e-list-item:nth-child(2) .e-avatar {
    background-color: #e91e63;
  }
  
  #List .e-list-item:nth-child(6) .e-avatar {
    background-color: #009688;
  }
  
  #List .e-list-item:nth-child(8) .e-avatar {
    background-color: #0088;
  }
 

 

Template

 

 

 

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