How to get started easily with Syncfusion List View in Angular 6

4 mins read

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

Did you find this information helpful?

Yes

Comments (0)

How to get started easily with Syncfusion List View in Angular 6

Access denied