ng generate component command in Angular CLI
ng generate component command is used to create components in Angular applications
ng generate component syntax
The syntax of ng generate component takes component name as parameter.
Additionally we can pass different options as well.
ng generate component [name] [options]
or you can use shorthand notation
ng generate c [name] [options]
ng generate component arguments
ng generate component takes one argument i.e, name, nothing but component name.
The name type is string.
ng generate component options
ng generate component accepts 17 different types of options.
- change-detection
- display-block
- export
- flat
- inline-style
- inline-template
- module
- prefix
- project
- selector
- skip-import
- skip-selector
- skip-tests
- standalone
- style
- type
- view-encapsulation
| Option | Description | Type | Default Value |
|---|---|---|---|
| change-detection | The change detection strategy to use in the new component. Aliases: -c | Default | OnPush | Default |
| display-block | Specifies if the style will contain :host { display: block; }. Aliases: -b | boolean | false |
| export | The declaring NgModule exports this component. | boolean | false |
| flat | Create the new files at the top level of the current project. | boolean | false |
| inline-style | 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. Aliases: -s | boolean | false |
| inline-template | Include template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file. Aliases: -t | boolean | false |
| module | The declaring NgModule. Aliases: -m | string | |
| prefix | The prefix to apply to the generated component selector. Aliases: -p | string | |
| project | The name of the project. | string | |
| selector | The HTML selector to use for this component. | string | |
| skip-import | Do not import this component into the owning NgModule. | boolean | false |
| skip-selector | Specifies if the component should have a selector or not. | boolean | false |
| skip-tests | Do not create "spec.ts" test files for the new component. | boolean | false |
| standalone | Whether the generated component is standalone. | boolean | false |
| style | The file extension or preprocessor to use for style files, or 'none' to skip generating the style file. | css | scss | sass | less | none | css |
| type | Adds a developer-defined type to the filename, in the format "name.type.ts". | string | Component |
| view-encapsulation | The view encapsulation strategy to use in the new component. Aliases: -v | Emulated | None | ShadowDom |
ng generate component example
For example if you want to create a component named product, use ng generate component product command.
CREATE src/app/product/product.component.html (22 bytes)
CREATE src/app/product/product.component.spec.ts (633 bytes)
CREATE src/app/product/product.component.ts (280 bytes)
CREATE src/app/product/product.component.scss (0 bytes)
UPDATE src/app/app.module.ts (1039 bytes)