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

How to generate Components in a specific folder with Angular CLI ?

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.

Similar Reads

Syntax

The following syntax is used to generate the component in Angular:...

Manually typing the path in the CLI

...

Integrated Terminal option

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....

Relative Path 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....