Schematics in Angular Listview component
17 Nov 20222 minutes to read
Angular schematics is a workflow tool that allows you generate component, modules, and resolve dependency issues. The main goal of the schematics is ease of use and development in angular environment.
EJ2 ListView supports Angular schematic’s module injection, component generation, automation dependency installation, styles imports, etc.
Note: Angular schematics supports only from the Angular CLI v6. So, check your version by running
ng --version. If it is below version 6, update your CLI by running the following command:
npm install -g @angular/cli.
In order to work with Angular schematics, create an Angular CLI application. Run the following command to create a CLI application.
ng new angular-application
After running the above command and all the dependency modules installed, we can generate EJ2 ListView component using schematics.
Dependency and Module injection using Schematics
Using schematics, we can perform dependency and module injection of the EJ2 lists package
@syncfusion/ej2-angular-lists automatically. Run the following command in the root of the application.
ng add @syncfusion/ej2-angular-lists
The above command will do the following,
- Installs the
@syncfusion/ej2-angular-listspackage, and add an entry in
- Imports the
ListViewModulemodule in the
app.module.ts, and add an entry in the
importproperty of the
Component generation using Schematics
Angular Schematics can be used to generate component, module file, etc. In the same way, ListView components can also be generated.
By using the Schematics to generate EJ2 ListView, the time for configuring components is significantly reduced and it is made ready for development immediately. To generate EJ2 ListView component with specific features, refer to the following table.
The general syntax for the ng generate command is
ng generate @syncfusion/<component-package-name>:<componentName-featureName> --name=<your-desired-name>
|Feature Name||Schematics command|
The above commands will do the following,
- Generate the ListView with specific features mentioned in the
src/appwith folder name of the
- Import the generated component into the
app.module.tsfile, and add an entry in the
declarationsarray in the
Note: It is not required to run the above commands only after the
ng add @syncfusion/ej2-angular-listsbut it is required to have