---
title: "Schematics for Syncfusion Angular UI Components"
published_at: "2019-01-22T11:00:37+00:00"
modified_at: "2021-09-13T11:39:47+00:00"
url: "https://www.syncfusion.com/blogs/post/schematics-for-syncfusion-angular-ui-components"
excerpt: "Traditionally, we need to do the following to include any of the Syncfusion Angular components in the Angular CLI environment: Create a new Angular CLI application. Install the Syncfusion Angular package. Register the module in app.module.ts. Add required theme references...."
taxonomy_category:
  - "Development"
  - "Essential JS 2"
  - "Syncfusion"
  - "Web"
taxonomy_post_tag:
  - "Angular"
  - "angular 7"
  - "angular cli"
  - "angular schematics"
  - "angular ui"
  - "angular ui components"
  - "Essential JS 2"
  - "listview"
  - "schematics"
---

# Schematics for Syncfusion Angular UI Components

[Karthick T](https://www.syncfusion.com/blogs/author/karthickt)

![Angular Schematics](https://www.syncfusion.com/blogs/wp-content/uploads/2019/01/Angular-Schematics-Feature-image.png)


Traditionally, we need to do the following to include any of the Syncfusion Angular components in the Angular CLI environment:

1. Create a new Angular CLI application.
2. Install the Syncfusion Angular package.
3. Register the module in **app.module.ts**.
4. Add required theme references.
5. Add the Syncfusion Angular component.
6. Compile and run the application using the **ng serve -o** command.

In the manual configuration process, we may encounter many issues while working with multiple packages. Because of this, we recommend Angular Schematics for configuring any Syncfusion Angular components with simple commands.

[Schematics](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2)
 is a modern web scaffolding tool that can apply transforms to your project, such as creating new components, and installing and configuring existing Angular libraries.

I am very excited to announce that our [Angular UI component suite](https://www.syncfusion.com/angular-ui-components/)
 supports Schematics out of the box! This provides the following:

- Add, install, and configure any Syncfusion Angular package.
- Include our readily available themes in your application.
- Include the most frequently used code snippets of our components.

In this blog, we are going to learn about how to use our [Angular Schematics features](https://ej2.syncfusion.com/angular/documentation/common/schematics/)
 in an Angular CLI application.

Let’s start with the integration and configuration.

## Create Angular CLI application

Before we get started with configuration, ensure the latest [Angular CLI](https://cli.angular.io/)
 is installed in your system environment. If it is not installed, we recommend you use the following command to install it:

> npm install -g @angular/cli

Run the following command to create a new Angular CLI application:

> ng new syncfusion-schematics

This command requires [routing](https://angular.io/guide/router)
 and style sheet format inputs to create the application, which are up to us. In the following figure, we are enabling the routing and using CSS for style sheet format.

## ![Creating an Angular CLI application](https://blog.syncfusion.com/wp-content/uploads/2019/01/ng-new-1024x575.png)

*Creating an Angular CLI application*

## Configure Syncfusion Angular packages

The Angular CLI application is now ready. Navigate to the created CLI application using the following command:

> cd syncfusion-schematics

Now you can install and configure any Syncfusion Angular package using the **ng add** command. Here, we are going to configure our [ListView](https://ej2.syncfusion.com/angular/demos/#/material/listview/default)
 component using the following command:

> ng add @syncfusion/ej2-angular-lists

This command will configure the ListView component with a default Material theme in the Angular CLI application. If you wish to change the [built-in theme](https://ej2.syncfusion.com/angular/documentation/appearance/theme/)
, include the **theme** attribute with the ** ng add**command, as shown in the following code:.

> ng add @syncfusion/ej-angular-lists ––theme=”fabric”

You can see the code changes required for changing the theme in the following screenshots from the Visual Studio Code editor.

| File | Code changes |
| --- | --- |
| package.json |  |
| angular.json |  |
| app.module.ts |  |
| style.css |  |

**Note:** You may use our Angular packages with multiple modules. For example, our [@syncfusion/ej2-angular-popups](https://www.npmjs.com/package/@syncfusion/ej2-angular-popups)
 components have multiple modules such as **[Dialog](https://ej2.syncfusion.com/angular/demos/#/material/dialog/default)** and **[Tooltip](https://ej2.syncfusion.com/angular/demos/#/material/tooltip/default)**. We can [include the specific module](https://ej2.syncfusion.com/angular/documentation/common/schematics/#adding-specific-modules-from-multiple-component-package)
 using the **––module** attribute as in the following command:

> ng add @syncfusion/ej2-angular-popups ––modules=”tooltip”

## Include code examples

The [Syncfusion ListView](https://www.syncfusion.com/angular-ui-components/listview)
 component is now configured into the Angular CLI application. Next, we are going to include the default ListView code example into this application, using the **ng generate** command.

> ng g @syncfusion/ej2-angular-lists:listview-default ––name=syncfusion-lists

This command will include the code examples in the ***syncfusion-lists*** Angular component file. You can reference the folder *** syncfusion-lists*** for created component file changes. The command execution should look like the following figure.

![Adding ListView to the Application](https://blog.syncfusion.com/wp-content/uploads/2019/01/create-default-list-1024x575.png)

*Adding ListView to the Application*

## Routing for Syncfusion ListView

Finally, we must include the routing for the created ListView Angular component in the **app.routing.ts** file.

[app.routing.ts]

> import { NgModule } from ‘@angular/core’;
> 
> import { Routes, RouterModule } from ‘@angular/router’;
> 
> // Syncfusion ListView component routing.
> 
> import { SyncfusionListsComponent } from ‘./syncfusion-lists/syncfusion-lists.component’;
> 
> const routes: Routes = [
> 
> { path: ‘lists’, component: SyncfusionListsComponent },
> 
> { path: ”, pathMatch: ‘full’, redirectTo : ‘lists’ }
> 
> ];
> 
> @NgModule({
> 
> imports: [RouterModule.forRoot(routes)],
> 
> exports: [RouterModule]
> 
> })
> 
> export class AppRoutingModule { }

## Serve the application

Go to the application directory and launch the server using the following command:

> ng serve ––open

Once all the files are compiled successfully, the site will be served.

The ListView default sample should look something like the following figure.

## **![ListView Sample Served](https://blog.syncfusion.com/wp-content/uploads/2019/01/output-1024x552.png)**

*ListView Sample Served*

If you wish, navigate to the following location to explore the code examples for the Syncfusion ListView component:

> node_modules/@syncfusion/ej2-angular-lists/schematics/generators

![Location of ListView Examples](https://blog.syncfusion.com/wp-content/uploads/2019/01/generators.png)

*Location of ListView Examples*

You can replace the ***listview-default*** name with the proper folder name to include a specific code example of our ListView component using the ** ng g**command from the include code examples section above. For example, the *** remote-list*** code example will be included when you use the following command:

> ng g @syncfusion/ej2-angular-lists:listview-remotelist ––name=syncfusion-lists

## **Summary**

In this blog, we learned how to use [Syncfusion Angular Schematics](https://ej2.syncfusion.com/angular/documentation/common/schematics/)
 to configure and generate samples for our Angular components in an Angular CLI application using simple commands.

Feel free to check out the Syncfusion Angular components on [GitHub](https://github.com/syncfusion/ej2-angular-ui-components)
, our [sample browser](https://ej2.syncfusion.com/angular/demos/#/material/avatar/default)
, and our [documentation](https://ej2.syncfusion.com/angular/documentation/)
 to explore live demos of the components and their various customization features.

If you have any questions or require clarifications, please let us know in the comments section below. You can also contact us through our [support forum](https://www.syncfusion.com/forums)
 or [Direct-Trac](https://www.syncfusion.com/support/directtrac/)
. We are happy to assist you!

*If you like this blog post, we think you’ll also like the following free ebook:*

*[Angular Succinctly](https://www.syncfusion.com/ebooks/angular-succinctly)*