List of External Library Angular Schematics​

Schematics is a workflow tool for the modern web; it can apply transforms to your project, such as create a new component, or updating your code to fix breaking changes in a dependency. Or maybe you want to add a new configuration option or framework to an existing project.

– from Official Introduction article

Angular CLI comes with very useful schematics to generate an application, component, service, module and many more. 

In Angular CLI 6, ng add command was introduced.

ng add adds the npm package for a published library to your workspace, and configures your default app project to use that library, in whatever way is specified by the library’s schematic. For example, adding @angular/pwa configures your project for PWA support.

Here is the list of external library angular schematics which helps you to improve application development speed and productivity.

To configure angular material design in your application generally, you need to follow four to five steps as mentioned in official angular material get started document.

But thanks to angular material schematics, using this you can configure the whole setup just by executing below command. 

ng add @angular/material

Executing this command will perform the following action.

  • Ensure project dependencies are placed in package.json
  • Enable the BrowserAnimationsModule your app module
  • Add either a prebuilt theme or a custom theme
  • Add Roboto fonts to your index.html
  • Add the Material Icon font to your index.html
  • Add global styles to Remove margins from body
    Set height: 100% on html and body
  • Make Roboto the default font of your app
  • Install and import  hammerjs for gesture support in your project

In addition to schematics for installation, Angular Material comes with the schematics for predesigned components like dashboard component, navigation component, address form component etc. 

Address Form schematic

Execute the below command to generate predesigned address form component.

ng generate @angular/material:address-form <component-name>

This command generates the component with given component-name and includes the predesigned form with the angular material form field, radio button, and button component. you can customize this form as per your requirement.

Navigation schematic

Navigation schematic generates component with toolbar and responsive side-nav

ng generate @angular/material:nav <component-name>

Table schematic

Table schematic generates the component that renders an Angular Material <table> which has been pre-configured with a datasource for sorting and pagination.

ng generate @angular/material:table <component-name>

checkout the list of best angular data tables

Dashboard schematic

Dashboard schematic generates component with dynamic grid list of material design cards.

ng generate @angular/material:dashboard <component-name>

Tree schematic

Tree schematic generates an angular component that uses the Angular Material <mat-tree> component to visualize a nested folder structure.

ng generate @angular/material:tree <component-name>

Drag and Drop schematic

Drang and drop schematic is a part of @angular/cdk, this schematic generates an angular component that uses CDK drag and drop directives.

ng generate @angular/cdk:drag-drop <component-name>

Generally, you need to follow below steps to manually install and configure the clarity design system as mentioned in get started.

  1. Install @clr/icons, @clr/ui, @clr/angular and @webcomponents/custom-elements package.
  2. Adding scripts and styles in angular.json
  3. Import ClarityModule in AppModule

But using clarity design system angular schematic, you can configure the whole setup just by executing below command. 

ng add @clr/angular

Executing this command will perform all the above-mentioned action which you need to do manually.

Note: If you are using the Angular CLI with multiple projects, you can specify which project to add Clarity to by using the --project PROJECTNAME flag.

Clarity design system also provides an angular schematic to update it in order to keep up to date.

ng update @clr/angular

Ngx-bootstrap provides the following schematic to install it in Angular Application.

ng add ngx-bootstrap

Executing this command will update your Angular project with the necessary ngx-bootstrap dependencies, make changes to package.json, angular.json and will execute initialization code.

Ngx-bootstrap also provides a schematic to add appropriate component. for example to use accordion component use below command

ng add ngx-bootstrap --component accordion

same as above it also provides commands for other components. 

Progressive Web Apps are experiences that combine the best of the web and the best of apps. 

Using below command you can add progressive web app support in your angular app.

ng add @angular/pwa

Above command performs the following action :

  1. Adds the @angular/service-worker package to your project.
  2. Enables service worker build support in the CLI.
  3. Imports and registers the service worker in the app module.
  4. Updates the index.html file:
    • Includes a link to add the manifest.json file.
    • Adds meta tags for theme-color.
  5. Installs icon files to support the installed Progressive Web App (PWA).
  6. Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.

NgRx Schematics gives commands to generate Store, Action, Reducer, Container, Effect, Entity and Feature.

For example, following command generates the action with given ActionName.

ng generate action ActionName [options]

NgRx Schematics installation is a little different than the above libraries. Refer NgRx Schematics overview for more details.

To use NGXS Store in an angular application, NGXS provides schematics. You can install it using below command.

ng add @ngxs/schematics

This command installs the required dependencies, and update the angular.json and package.json file

It provides schematic to generate Store, Action and State, along with this it also gives starter-kit schematic.

For example, use below command to generate Store.

ng generate @ngxs/schematics:store --name todo

This command generates two files, todo.actions.ts and todo.state.ts

NgMomentum provides schematics to generate CRUD operation views with its components and services. You just need to pass model and API URL as a command line. It also provides a schematic to generate view, value object, model and service.

Use below command to install ngMomentum schematics

ng add ng-momentum

To generate  CRUD components with service, you just need to execute below command. You just point this to an endpoint or state the object structure and it creates a full CRUD operation against your endpoint create for consumption.

ng g ng-momentum:crud --name=heros --url=http://localhost:3000/superheros.json

Refer this blog for more details.

Which schematics do you use ❓ Write in the comment section below 🙂