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.
Table of Content
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 folder
Steps 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 folder
Explanation: 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 created
Integrated 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 Termial
Step 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 option
Explanation: 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 created
However, 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 option
Explanation: 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 folder
Relative 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 Path
Step 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 option
Explanation: In the folder path user/user-info, the component user-info is generated with the necessary files.
Output:
user-info component created
In 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.