123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- {
- "$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"]
- }
|