Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kevinrodriguezmorales/siget/llms.txt

Use this file to discover all available pages before exploring further.

The ng generate command (aliased as ng g) creates new code files for your Angular application using Angular schematics. Each schematic produces a consistent set of files — TypeScript class, HTML template, stylesheet, and spec file — wired up and ready to use. Siget configures SCSS as the default style format for all generated components via the schematics section in angular.json.

Synopsis

ng generate <schematic> [name] [options]
ng g <schematic> [name] [options]

Schematics Reference

SchematicAliasDescription
componentcStandalone Angular component with template, style, and spec files
directivedAngular attribute or structural directive
pipepAngular pipe for transforming values in templates
servicesInjectable Angular service
guardgRoute guard to control navigation
interceptorHTTP interceptor for request/response handling
resolverrRoute data resolver that prefetches data before navigation
modulemNgModule (optional in standalone-first Angular 21 apps)

Examples

# Generate a component at src/app/features/user-profile/
ng generate component features/user-profile

# Same command using the alias
ng g component features/user-profile

# Generate an injectable service
ng generate service services/auth

# Generate a pipe for date formatting
ng generate pipe pipes/format-date

# Generate a functional route guard
ng generate guard guards/auth --functional

Generated Component Structure

Running ng generate component features/user-profile produces the following files inside src/app/:
src/app/features/user-profile/
├── user-profile.component.ts
├── user-profile.component.html
├── user-profile.component.scss
└── user-profile.component.spec.ts
SCSS is the default style format for all generated components. This is controlled by the schematics section in angular.json:
"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}
Every new component’s stylesheet will be a .scss file, and the inlineStyleLanguage for the build is also set to scss.

Inline Template and Style Flags

For small, self-contained components you can skip the separate HTML and SCSS files and keep everything in the TypeScript class file:
FlagDescription
--inline-templateEmbed the template directly in the @Component decorator instead of a separate .html file
--inline-styleEmbed styles directly in the @Component decorator instead of a separate .scss file
# Generate a compact component with no separate template or style files
ng generate component shared/spinner --inline-template --inline-style
Run ng generate --help to see the full list of available schematics and their options at any time:
ng generate --help
You can also get option-level help for a specific schematic, for example:
ng generate component --help

Build docs developers (and LLMs) love