The Uncharted Path

The Uncharted Path

How to set onPush as the default change detection strategy for new Angular components?

Subscribe to my newsletter and never miss my upcoming articles

Most angular components I create are generated using the angular CLI. Every time I had to set the change detection to onPush after the component has been created. I know there is an option to set it as the default, but I was lazy to search and set it up.

Last week I was developing the overall architecture for a new module. I was generating a lot of skeleton components. It was frustrating to set onPush manually for every new component. I searched how to set the onPush as the default strategy for new components.

Step 1 : Open your angular.json file.

Step 2: Find the section that says schematics, probably close to bottom.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {...},
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "style": "less",
    },
  },

Step 3: Find the schematics configuration for angular components, named angular: components.

Step 4: Add the following under the component schematics section.

"changeDetection": "OnPush"

That's it, any new components you generate will be configured to onPush change detection strategy. I regretted that I was lazy and was doing it manually for so long. There are a lot of other schematics available in the angular.json file. You can also use them as parameters for the ng generate command. Check them here.

#angularjs#components
 
Share this