nx/docs/generated/packages/angular/generators/component.json

{
  "name": "component",
  "factory": "./src/generators/component/component#componentGeneratorInternal",
  "schema": {
    "$schema": "http://json-schema.org/draft-07/schema",
    "$id": "SchematicsAngularComponent",
    "title": "Angular Component Schema",
    "cli": "nx",
    "type": "object",
    "description": "Creates a new Angular component.",
    "additionalProperties": false,
    "properties": {
      "name": {
        "type": "string",
        "description": "The name of the component.",
        "$default": { "$source": "argv", "index": 0 },
        "x-prompt": "What name would you like to use for the component?"
      },
      "directory": {
        "type": "string",
        "description": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the workspace root.",
        "aliases": ["dir", "path"],
        "x-priority": "important"
      },
      "nameAndDirectoryFormat": {
        "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
        "type": "string",
        "enum": ["as-provided", "derived"]
      },
      "project": {
        "type": "string",
        "description": "The name of the project.",
        "$default": { "$source": "projectName" },
        "x-dropdown": "projects",
        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v19."
      },
      "prefix": {
        "type": "string",
        "description": "The prefix to apply to the generated component selector.",
        "alias": "p"
      },
      "displayBlock": {
        "description": "Specifies if the style will contain `:host { display: block; }`.",
        "type": "boolean",
        "default": false,
        "alias": "b"
      },
      "inlineStyle": {
        "description": "Include styles inline in the component.ts file. Only CSS styles can be included inline. By default, an external styles file is created and referenced in the component.ts file.",
        "type": "boolean",
        "default": false,
        "alias": "s"
      },
      "inlineTemplate": {
        "description": "Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.",
        "type": "boolean",
        "default": false,
        "alias": "t"
      },
      "standalone": {
        "description": "Whether the generated component is standalone.",
        "type": "boolean",
        "default": true,
        "x-priority": "important"
      },
      "viewEncapsulation": {
        "description": "The view encapsulation strategy to use in the new component.",
        "enum": ["Emulated", "None", "ShadowDom"],
        "type": "string",
        "alias": "v"
      },
      "changeDetection": {
        "description": "The change detection strategy to use in the new component.",
        "enum": ["Default", "OnPush"],
        "type": "string",
        "default": "Default",
        "alias": "c"
      },
      "module": {
        "type": "string",
        "description": "The filename or path to the NgModule that will declare this component.",
        "alias": "m"
      },
      "style": {
        "description": "The file extension or preprocessor to use for style files, or `none` to skip generating the style file.",
        "type": "string",
        "default": "css",
        "enum": ["css", "scss", "sass", "less", "none"]
      },
      "skipTests": {
        "type": "boolean",
        "description": "Do not create `spec.ts` test files for the new component.",
        "default": false
      },
      "flat": {
        "type": "boolean",
        "description": "Create the new files at the top level of the current project.",
        "default": false,
        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v19."
      },
      "skipImport": {
        "type": "boolean",
        "description": "Do not import this component into the owning NgModule.",
        "default": false
      },
      "selector": {
        "type": "string",
        "format": "html-selector",
        "description": "The HTML selector to use for this component."
      },
      "skipSelector": {
        "type": "boolean",
        "default": false,
        "description": "Specifies if the component should have a selector or not."
      },
      "type": {
        "type": "string",
        "description": "Adds a developer-defined type to the filename, in the format `name.type.ts`.",
        "default": "component"
      },
      "export": {
        "type": "boolean",
        "description": "Specifies if the component should be exported in the declaring `NgModule`. Additionally, if the project is a library, the component will be exported from the project's entry point (normally `index.ts`) if the module it belongs to is also exported or if the component is standalone.",
        "default": false,
        "x-priority": "important"
      },
      "skipFormat": {
        "description": "Skip formatting files.",
        "type": "boolean",
        "default": false,
        "x-priority": "internal"
      }
    },
    "required": ["name"],
    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nCreate a component named `my-component`:\n\n```bash\nnx g @nx/angular:component my-component\n```\n\n{% /tab %}\n\n{% tab label=\"Single File Component\" %}\n\nCreate a component named `my-component` with inline styles and inline template:\n\n```bash\nnx g @nx/angular:component my-component --inlineStyle --inlineTemplate\n```\n\n{% /tab %}\n\n{% tab label=\"Component with OnPush Change Detection Strategy\" %}\n\nCreate a component named `my-component` with OnPush Change Detection Strategy:\n\n```bash\nnx g @nx/angular:component my-component --changeDetection=OnPush\n```\n\n{% /tab %}\n",
    "presets": []
  },
  "aliases": ["c"],
  "description": "Generate an Angular Component.",
  "implementation": "/packages/angular/src/generators/component/component#componentGeneratorInternal.ts",
  "hidden": false,
  "path": "/packages/angular/src/generators/component/schema.json",
  "type": "generator"
}