How to generate Components in a specific folder with Angular CLI ?
Last Updated :
08 Oct, 2023
Angular CLI is a command-line interface tool. Angular applications can be directly created, initialized, developed, and maintained using the command shell provided by CLI. Angular CLI facilitates to generate any number of components in the application, & by default, the Components are generated inside the app folder in the source(src) directory.
Syntax
The following syntax is used to generate the component in Angular:
ng generate component <component-name>
or Short-hand for the above command is:
ng g c <component-name>
However, the Component can also be generated inside the specific folder using Angular CLI, which is described by the following approaches.
We will explore the above approaches to generate components in a specific folder with Angular CLI, along with understanding the steps to genrate them.
Manually typing the path in the CLI
We can specify the path of the folder where we want the component to be generated. Since Angular doesn't allow us to create a component outside app folder. We will move to our angular app folder using the below command.
cd angular-app
Here, is the name of the angular application created.
Move to angular-app folderSteps to generate the Component by typing the path manually:
If we want to generate the component in angular-app, follow the below steps:
- Note down the path where we want the component to be generated.
- Manually type the path of the folder. Here angular-app\src\app is the path of the folder.
- Type the below command and press enter.
ng g c angular-app\src\app/home-page
The page home-page is the name of the component
Manually entering path of the folderExplanation: In the above example, in the folder path angular-app\src\app the component home-page is generated with the necessary files like home-page.component.css, home-page.component.html, home-page.component.ts and home-page.component.spec.ts.
Output:
home-page component createdIntegrated Terminal option
We can use the Integrated terminal option available in Vscode IDE/editor. To create a component using Integrated Terminal option, follow the below steps given.
Steps to generate the Component using Integrated terminal option:
Step 1 : Right click on the app folder which is found inside the angular-app folder and select Open in Integrated Terminal option.
Integrated TermialStep 2 : Type the below command and press enter
ng g c employee/employee-details
Here, the employee/employee-details is the name of the component.
By using Integrated Terminal optionExplanation: From the below folder structure, the folder path employee/employee-details, the component employee-details is generated with the necessary files like employee-details.component.css, employee-details.component.html, employee-details.component.spec.ts and employee-details.component.ts.
Output:
employee-details component createdHowever, if we don't want to create additional folder(employee-details folder) while creating a component, we can use --flat option in the above command.
ng g c employee/employee-details --flat
Using --flat optionExplanation: In the folder path employee, the component employee-details is generated with the necessary files like employee-details.component.css,employee-details.component.html, employee-details.component.spec.ts and employee-details.component.ts.
Output:
Without employee-details folderRelative Path option
We can use the Relative Path option available in Vscode IDE/editor. To create a component using Relative Path Option, follow the below given steps.
Steps to generate the Component using Relative Path option
Step 1 : Right click on the app folder which is found inside the angular-app folder and select Copy Relative Path
Copy Relative PathStep 2 : In the terminal, type cd and paste the relative path copied in the above step and press enter
cd angular-app\src\app
Step 3 : Type the below command and press enter
ng g c user/user-info
Here, the user/user-info is the name of the component.
By using copy relative path optionExplanation: In the folder path user/user-info, the component user-info is generated with the necessary files.
Output:
user-info component createdIn Conclusion, these are ways by which we can generate components in a specific folder using Angular CLI, that will perform some specific task for the respective component is created.
Similar Reads
How to create a new component in Angular?
A component in Angular is the building block for making web pages. It is a reusable block of code that can be used anywhere in the app any number of times. It provides scalability, reusability, and readability. Each component does a specific job like showing a menu, a photo or a card, etc. In this a
3 min read
How to generate QR Codes with Angular 10 ?
QR Code (Quick Response Code) has become the essential component for each and every product, organization, app, etc. In marketing campaigns, we can use the generated QR code to Download appsSend EmailView business location etc. In this article let us see how to generate QR Codes with Angular 10. Pre
3 min read
How to pass data from Parent to Child component in Angular ?
We can use the @Input directive for passing the data from the Parent to Child component in Angular Using Input Binding: @Input - We can use this directive inside the child component to access the data sent by the parent component. Here app.component is the Parent component and cdetail.component is t
3 min read
How to get file content and other details in AngularJS?
We can get the file content by using some basic angular functions and other details like the name and size of the file in AngularJS. To understand it look into the below example where both HTML and JS files are implemented. Note: Consider below two files are of same component in angular. app.module.
2 min read
How to create class in Angular Project?
In Angular, TypeScript is the primary language for writing code. One of the fundamental concepts in TypeScript is classes, which allow you to define blueprints for creating objects with properties and methods. In this article, we'll explore how to create classes in Angular projects and understand th
2 min read
Using a http service in Angular 17 with standalone components
In Angular 17, they've introduced standalone components, which change how you build and organize Angular applications. These components are self-sufficient and can be used on their own without being tied to a specific NgModule. But, sometimes, when you're working with these standalone components, yo
3 min read
Passing data from Child to Parent Component in Angular
In Angular, passing data from a child component to its parent component involves emitting events. Essentially, the child component emits an event containing the data that the parent component needs to receive. This is typically achieved using Angular's EventEmitter class, where the child component e
3 min read
How to create module with Routing in Angular 9 ?
Angular applications are modular, and NgModules is Angular's own modular architecture. NgModules are containers for closely integrated application domains, workflows, or feature sets that comprise cohesive code blocks. Their scope is governed by the NgModule they include, and they can contain compon
4 min read
Use nested Components With Standalone Components in Angular 17
Angular 17 introduced a new feature called Standalone Components, which allows you to create self-contained components that can be used independently without being tied to a specific module. This feature can make your code more modular and easier to maintain. However, when working with Standalone Co
3 min read
Handle User Events in Angular Components
User events are very important for creating interactive and responsive applications in Angular. These events allow users to interact with the user interface (UI) elements, and Angular provides a convenient way to handle these events within components. In Angular, user events can be handled using eve
3 min read