Component workflow

Components are fundamental building blocks of the application's user interface responsible for displaying and controlling a parts of the view

• Component library generator options

• Generate a component library

Component library location: /libs/components/{{component-name}}

Do generate a component library for isolated components

Do keep components dumb or presentational

Do communicate through @Input and @Output

Do use OnPush change detection

Do use standalone component architecture

Do use the --flat architecture

Avoid --inlineStyle option

Avoid --inlineTemplate option

Component library generator options

Run the below command to view all library options.

nx g component --help

Components options reference: https://nx.dev/packages/angular/generators/component

From:  @nrwl/angular (v15.8.1)
Name:  component (aliases: c)


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


Options:
    --name                     The name of the component.                                                                                                                                                [string] 
    --export                   Specifies if the component should be exported in the declaring `NgModule`. Additionally,                                                                                 [boolean] 
                               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.
    --project                  The name of the project.                                                                                                                                                  [string] 
    --standalone               Whether the generated component is standalone. _Note: This is only supported in Angular                                                                                  [boolean] 
                               versions >= 14.1.0_
    --changeDetection, -c      The change detection strategy to use in the new component.                                                            [string] [choices: "Default", "OnPush"] [default: "Default"] 
    --displayBlock, -b         Specifies if the style will contain `:host { display: block; }`.                                                                                                         [boolean] 
    --flat                     Create the new files at the top level of the current project.                                                                                                            [boolean] 
    --inlineStyle, -s          Include styles inline in the component.ts file. Only CSS styles can be included inline.                                                                                  [boolean] 
                               By default, an external styles file is created and referenced in the component.ts file.
    --inlineTemplate, -t       Include template inline in the component.ts file. By default, an external template file                                                                                  [boolean] 
                               is created and referenced in the component.ts file.
    --module, -m               The filename or path to the NgModule that will declare this component.                                                                                                    [string] 
    --path                     The path at which to create the component file, relative to the current workspace.                                                                                        [string] 
                               Default is a folder with the same name as the component in the project root.
    --selector                 The HTML selector to use for this component.                                                                                                                              [string] 
    --skipImport               Do not import this component into the owning NgModule.                                                                                                                   [boolean] 
    --skipSelector             Specifies if the component should have a selector or not.                                                                                                                [boolean] 
    --skipTests                Do not create `spec.ts` test files for the new component.                                                                                                                [boolean] 
    --style                    The file extension or preprocessor to use for style files, or `none` to skip generating                 [string] [choices: "css", "scss", "sass", "less", "none"] [default: "css"] 
                               the style file.
    --type                     Adds a developer-defined type to the filename, in the format `name.type.ts`.                                                                       [string] [default: "component"] 
    --viewEncapsulation, -v    The view encapsulation strategy to use in the new component.                                                                   [string] [choices: "Emulated", "None", "ShadowDom"]

Generate a component library

Run the below command to generate a component library

nx g lib --name={{component-name}} --directory=libs/components --changeDetection=OnPush --flat --standalone --style=scss