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

{
  "name": "component",
  "factory": "./src/generators/component/component",
  "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": {
      "path": {
        "type": "string",
        "description": "The file path to the component without the file extension and suffix. Relative to the current working directory.",
        "$default": { "$source": "argv", "index": 0 },
        "x-prompt": "What is the component file path?"
      },
      "name": {
        "type": "string",
        "description": "The component symbol name. Defaults to the last segment of the file path."
      },
      "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
      },
      "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": ["path"],
    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nGenerate a component named `MyComponent` at `apps/my-app/src/lib/my-component/my-component.component.ts`:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/my-component/my-component\n```\n\n{% /tab %}\n\n{% tab label=\"With Different Symbol Name\" %}\n\nGenerate a component named `CustomComponent` at `apps/my-app/src/lib/my-component/my-component.component.ts`:\n\n```bash\nnx g @nx/angular:component apps/my-app/src/lib/my-component/my-component --name=custom\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 apps/my-app/src/lib/my-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 apps/my-app/src/lib/my-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.ts",
  "hidden": false,
  "path": "/packages/angular/src/generators/component/schema.json",
  "type": "generator"
}