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.

  1. change-detection
  2. display-block
  3. export
  4. flat
  5. inline-style
  6. inline-template
  7. module
  8. prefix
  9. project
  10. selector
  11. skip-import
  12. skip-selector
  13. skip-tests
  14. standalone
  15. style
  16. type
  17. view-encapsulation
OptionDescriptionTypeDefault Value
change-detectionThe change detection strategy to use in the new component. Aliases: -cDefault | OnPushDefault
display-blockSpecifies if the style will contain :host { display: block; }. Aliases: -bbooleanfalse
exportThe declaring NgModule exports this component.booleanfalse
flatCreate the new files at the top level of the current project.booleanfalse
inline-styleInclude 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: -sbooleanfalse
inline-templateInclude template inline in the component.ts file. By default, an external template file is created and referenced in the component.ts file. Aliases: -tbooleanfalse
moduleThe declaring NgModule. Aliases: -mstring
prefixThe prefix to apply to the generated component selector. Aliases: -pstring
projectThe name of the project.string
selectorThe HTML selector to use for this component.string
skip-importDo not import this component into the owning NgModule.booleanfalse
skip-selectorSpecifies if the component should have a selector or not.booleanfalse
skip-testsDo not create "spec.ts" test files for the new component.booleanfalse
standaloneWhether the generated component is standalone.booleanfalse
styleThe file extension or preprocessor to use for style files, or 'none' to skip generating the style file.css | scss | sass | less | nonecss
typeAdds a developer-defined type to the filename, in the format "name.type.ts".stringComponent
view-encapsulationThe view encapsulation strategy to use in the new component. Aliases: -vEmulated | 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)
Liked this post? Subscribe