ng generate directive command in Angular CLI

ng generate directive command is used to create directives in Angular applications

ng generate directive syntax

ng generate directive takes directive name as parameter.

Additionally we can pass different options as well.

ng generate directive [name] [options]

or you can use shorthand syntax

ng generate d [name] [options]

ng generate directive arguments

ng generate directive takes one argument i.e, name, nothing but directive name.

The name type is string.

ng generate directive options

ng generate directive accepts 9 different types of options.

  1. export
  2. flat
  3. module
  4. prefix
  5. project
  6. selector
  7. skip-import
  8. skip-tests
  9. standalone
OptionDescriptionTypeDefault Value
exportThe declaring NgModule exports this directive.booleanfalse
flatWhen true (the default), creates the new files at the top level of the current project.booleantrue
moduleThe declaring NgModule. Aliases: -mstring
prefixA prefix to apply to generated selectors. Aliases: -pstring
projectThe name of the project.string
selectorThe HTML selector to use for this directive.string
skip-importDo not import this directive into the owning NgModule.booleanfalse
skip-testsDo not create "spec.ts" test files for the new class.booleanfalse
standaloneWhether the generated directive is standalone.booleanfalse

ng generate directive example

For example if you want to create a directive named product, use ng generate directive product command.

CREATE src/app/product.directive.spec.ts (228 bytes)
CREATE src/app/product.directive.ts (143 bytes)
UPDATE src/app/app.module.ts (471 bytes)
Liked this post? Subscribe