ANGULAR ng generate
ANGULAR
The Angular CLI command ng generate is used to create various Angular entities such as components, services, and modules.
The command ng generate or ng g
➔ This command creates new entities or modifies existing entities in an Angular project. This entity can be a typeScript class, component, service, module, etc.
Key points of the ng generate command:
The ng generate command is most commonly used to generate Angular semantics such as components, classes, interfaces, services, modules, and more.
Increased productivity: This command eliminates the manual creation of boilerplate code and automates the process of creating the necessary files and maintaining the structure. This helps developers focus more on developing business logic.
Coding consistency: ng generate enforces a consistent naming convention for project files and other resources. This makes the project more manageable and readable to the development team members.
Automatic configuration: When Angular semantics, such as a service or component, are created, it is automatically registered and imported, and the Angular CLI automatically updates the related parts of the application.
Built in best practices: Angular recommends following code generation using CLI commands because the generated code is built with appropriate structures, imports, and configurations. This ensures that developers follow industry standard best practices.
Syntax
ng generate <schematic> [name]
ng g <schematic> [name]
➔ ng generate for class
ng generate class [name] [options]
ng g cl [name] [options]
ng g cl student
➔ ng generate component
ng generate component [name] [options]
ng g c [name] [options]
ng g c product
Most common semantics for ng generate:
| Semantic | Syntax | Shortcut |
|---|---|---|
| component | ng generate component [component-name] | ng g c [component-name] |
| class | ng generate class [class-name] | ng g cl [class-name] |
| interface | ng generate interface [interface-name] | ng g i [interface-name] |
| service | ng generate service [service-name] | ng g s [service-name] |
| module | ng generate module [module-name] | ng g m [module-name] |
| directive | ng generate directive [directive-name] | ng g d [directive-name] |
| pipe | ng generate pipe [pipe-name] | ng g p [pipe-name] |
| enum | ng generate enum [enum-name] | ng g e [enum-name] |
| guard | ng generate guard [guard-name] | ng g g [guard-name] |
| resolver | ng generate resolver [resolver-name] | ng g r [resolver-name] |
| interceptor | ng generate interceptor [interceptor-name] | ng g interceptor [interceptor-name] |
Common semantics of the ng generate command:
Component: A component is a building block for Angular applications that is made up of a combination of TypeScript classes, HTML views, and styles for the views.
Class: TypeScript classes are the basic building blocks for Angular components, services, and data models in Angular programming.
Interface: TypeScript interfaces are the basic building blocks of Angular programming that define the shape and structure of an object.
Service: Services are reusable components in Angular programming that are used to share data, logic, and functionality between different components.
Module: A module is a container for related components, directives, pipes, services to create a cohesive functional unit.
Directive: A directive is a class that has additional properties that carry a special function and meaning in Angular
Pipe: Pipes in Angular allow data transformation within HTML templates
Emum: Angular uses enums to define a set of constants that improve data readability and type safety.
Guard: Guards are used with Angular Router to control navigation to or from a specific route.
Resolver: Resolvers are used to pre-fetch data before activating a route.
Interceptor: Interceptors are used to inspect and transform HTTP requests and responses globally.
Common falg for ng generate
| Options | Alias | Description |
|---|---|---|
| --help | -h | Displays help for the command in the console. |
| --defaults | Disables interactive mode and chooses everything by default for the component. | |
| --interactive | This enables interactive mode at the input prompt. | |
| --force | This forces the existing file to be overwritten. | |
| --dry-run | This tells angular that the file will be created without actually creating it on disk. | |
Schemantic flag for ng generate component (or ng g c)
| Options | Alias | Description |
|---|---|---|
| --inline-style | -s | Creates inline style. |
| --inline-template | -t | Inline template will be used, instead of creating separate HTML file. |
| --standalone | Creates a standalone component for the project without relying on any module. | |
| --flat | Created the file in the target folder without creating any subfolders for the file. | |
| --selector | Specifies the type of CSS style used for the component file. |