The ListView component is available in @syncfusion/ej2-angular-lists
package. Utilize this package to render the
ListView Component.
You can use Angular CLI
to setup your Angular applications.
To install Angular CLI use the following command.
npm install -g @angular/cli
Start a new Angular application using below Angular CLI command.
ng new my-app
cd my-app
All the available Essential JS 2 packages are published in npmjs.com
registry.
To install Listview component, use the following command.
npm install @syncfusion/ej2-angular-lists --save
The —save will instruct NPM to include the listview package inside of the
dependencies
section of thepackage.json
.
Import ListView module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-lists
[src/app/app.module.ts].
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import Listview component Module
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
import { AppComponent } from './app.component';
@NgModule({
//declaration of listview module into NgModule
imports: [ BrowserModule, ListViewModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
styles.css
.@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-angular-lists/styles/material.css";
CheckList
behaviour in ListView, we need to add Button
component’s styles as given below in styles.css
file@import "../node_modules/@syncfusion/ej2-angular-buttons/styles/material.css";
We can also use CRG to generate combined component styles.
Modify the template in [src/app/app.component.ts] file to render the listview component.
Add the Angular Listview by using <ejs-listview>
selector in template
section of the app.component.ts file.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-container',
// specifies the template string for the Listview component
template: `<ejs-listview id='sample-list' [dataSource]='data'></ejs-listview>`
})
export class AppComponent {
public data: Object = [
{ text: 'Artwork', id: '01' },
{ text: 'Abstract', id: '02' },
{ text: 'Modern Painting', id: '03' },
{ text: 'Ceramics', id: '04' },
{ text: 'Animation Art', id: '05' },
{ text: 'Oil Painting', id: '06' }];
}
Use the following command to run the application in browser.
ng serve --open
The output will appear as follows.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<ejs-listview id='sample-list' [dataSource]='data'></ejs-listview>`
})
export class AppComponent {
public data: Object = [
{ text: 'Artwork', id: '01' },
{ text: 'Abstract', id: '02' },
{ text: 'Modern Painting', id: '03' },
{ text: 'Ceramics', id: '04' },
{ text: 'Animation Art', id: '05' },
{ text: 'Oil Painting', id: '06' }];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ListViewModule } from '@syncfusion/ej2-angular-lists';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
ListViewModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);