@schematics/angular/component/schema.json

Schematics specific to Angular

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "$id": "SchematicsAngularComponent",
  "title": "Angular Component Options Schema",
  "type": "object",
  "description": "Creates a new Angular component. Components are the basic building blocks of Angular applications. Each component consists of a TypeScript class, an HTML template, and an optional CSS stylesheet. Use this schematic to generate a new component in your project.",
  "additionalProperties": false,
  "properties": {
    "path": {
      "type": "string",
      "format": "path",
      "$default": {
        "$source": "workingDirectory"
      },
      "description": "The path where the component files should be created, relative to the current workspace. If not provided, a folder with the same name as the component will be created in the project's `src/app` directory.",
      "visible": false
    },
    "project": {
      "type": "string",
      "description": "The name of the project where the component should be added. If not specified, the CLI will determine the project from the current directory.",
      "$default": {
        "$source": "projectName"
      }
    },
    "name": {
      "type": "string",
      "description": "The name for the new component. This will be used to create the component's class, template, and stylesheet files. For example, if you provide `my-component`, the files will be named `my-component.component.ts`, `my-component.component.html`, and `my-component.component.css`.",
      "$default": {
        "$source": "argv",
        "index": 0
      },
      "x-prompt": "What name would you like to use for the component?"
    },
    "displayBlock": {
      "description": "Adds `:host { display: block; }` to the component's stylesheet, ensuring the component renders as a block-level element. This is useful for layout purposes.",
      "type": "boolean",
      "default": false,
      "alias": "b"
    },
    "inlineStyle": {
      "description": "Include the component's styles directly in the `component.ts` file. By default, a separate stylesheet file (e.g., `my-component.component.css`) is created.",
      "type": "boolean",
      "default": false,
      "alias": "s",
      "x-user-analytics": "ep.ng_inline_style"
    },
    "inlineTemplate": {
      "description": "Include the component's HTML template directly in the `component.ts` file. By default, a separate template file (e.g., `my-component.component.html`) is created.",
      "type": "boolean",
      "default": false,
      "alias": "t",
      "x-user-analytics": "ep.ng_inline_template"
    },
    "standalone": {
      "description": "Generate a standalone component. Standalone components are self-contained and don't need to be declared in an NgModule. They can be used independently or imported directly into other standalone components.",
      "type": "boolean",
      "default": true,
      "x-user-analytics": "ep.ng_standalone"
    },
    "viewEncapsulation": {
      "description": "Sets the view encapsulation mode for the component. This determines how the component's styles are scoped and applied.",
      "enum": ["Emulated", "None", "ShadowDom"],
      "type": "string",
      "alias": "v"
    },
    "changeDetection": {
      "description": "Configures the change detection strategy for the component.",
      "enum": ["Default", "OnPush"],
      "type": "string",
      "default": "Default",
      "alias": "c"
    },
    "prefix": {
      "type": "string",
      "description": "A prefix to be added to the component's selector. For example, if the prefix is `app` and the component name is `my-component`, the selector will be `app-my-component`.",
      "alias": "p",
      "oneOf": [
        {
          "maxLength": 0
        },
        {
          "minLength": 1,
          "format": "html-selector"
        }
      ]
    },
    "style": {
      "description": "Specify the type of stylesheet to be created for the component, or `none` to skip creating a stylesheet.",
      "type": "string",
      "default": "css",
      "enum": ["css", "scss", "sass", "less", "none"],
      "x-user-analytics": "ep.ng_style"
    },
    "type": {
      "type": "string",
      "description": "Append a custom type to the component's filename. For example, if you set the type to `container`, the file will be named `my-component.container.ts`.",
      "default": "Component"
    },
    "skipTests": {
      "type": "boolean",
      "description": "Skip the generation of unit test files `spec.ts`.",
      "default": false
    },
    "flat": {
      "type": "boolean",
      "description": "Create the component files directly in the project's `src/app` directory instead of creating a new folder for them.",
      "default": false
    },
    "skipImport": {
      "type": "boolean",
      "description": "Do not automatically import the new component into its closest NgModule.",
      "default": false
    },
    "selector": {
      "type": "string",
      "format": "html-selector",
      "description": "The HTML selector to use for this component. If not provided, a selector will be generated based on the component name (e.g., `app-my-component`)."
    },
    "skipSelector": {
      "type": "boolean",
      "default": false,
      "description": "Skip the generation of an HTML selector for the component."
    },
    "module": {
      "type": "string",
      "description": "Specify the NgModule where the component should be declared. If not provided, the CLI will attempt to find the closest NgModule in the component's path.",
      "alias": "m"
    },
    "export": {
      "type": "boolean",
      "default": false,
      "description": "Automatically export the component from the specified NgModule, making it accessible to other modules in the application."
    },
    "exportDefault": {
      "type": "boolean",
      "default": false,
      "description": "Use a default export for the component in its TypeScript file instead of a named export."
    }
  },
  "required": ["name", "project"]
}