@nx/angularSee schema

@nx/angular:component

Creates a new Angular component.

Examples

Generate a component named MyComponent at apps/my-app/src/lib/my-component/my-component.component.ts:

1nx g @nx/angular:component apps/my-app/src/lib/my-component/my-component.ts 2

Usage

1nx generate component ... 2
1nx g c ... #same 2

By default, Nx will search for component in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

1nx g @nx/angular:component ... 2

Show what will be generated without writing to disk:

1nx g component ... --dry-run 2

Options

path

Required
string

The file path to the component. Relative to the current working directory.

export

boolean
Default: false

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.

standalone

boolean
Default: true

Whether the generated component is standalone.

changeDetection

c
string
Default: Default
Accepted values: Default, OnPush

The change detection strategy to use in the new component.

displayBlock

b
boolean
Default: false

Specifies if the style will contain :host { display: block; }.

exportDefault

boolean
Default: false

Use default export for the component instead of a named export.

inlineStyle

s
boolean
Default: false

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.

inlineTemplate

t
boolean
Default: false

Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file.

module

m
string

The filename or path to the NgModule that will declare this component.

name

string

The component symbol name. Defaults to the last segment of the file path.

prefix

p
string

The prefix to apply to the generated component selector.

style

string
Default: css
Accepted values: css, scss, sass, less, none

The file extension or preprocessor to use for style files, or none to skip generating the style file.

skipTests

boolean
Default: false

Do not create spec.ts test files for the new component.

skipImport

boolean
Default: false

Do not import this component into the owning NgModule.

selector

string
Format: html-selector

The HTML selector to use for this component.

skipSelector

boolean
Default: false

Specifies if the component should have a selector or not.

type

string
Default: component

Adds a developer-defined type to the filename, in the format name.type.ts.

viewEncapsulation

v
string
Accepted values: Emulated, None, ShadowDom

The view encapsulation strategy to use in the new component.

skipFormat

Internal
boolean
Default: false

Skip formatting files.