@nx/angular:component

Creates a new, generic Angular component definition in the given or default project.

Examples

Create a component named my-component:

1nx g @nx/angular:component my-component 2
Nx 15 and lower use @nrwl/ instead of @nx/

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
Nx 15 and lower use @nrwl/ instead of @nx/

Show what will be generated without writing to disk:

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

Options

name

Required
string

The name of the component.

project

Required
string

The name of the project.

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: false

Whether the generated component is standalone. Note: This is only supported in Angular versions >= 14.1.0.

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; }.

flat

boolean
Default: false

Create the new files at the top level of the current project.

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.

path

string
Format: path

The path at which to create the component file, relative to the current workspace. Default is a folder with the same name as the component in the project root.

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

boolean
Default: false

Skip formatting files.