Creating Nested Component In Angular Using Angular CLI

Creating Nested Component In Angular Using Angular CLI

What is Nested Component?

• A component have another component inside it.
• Example: Consider Employee Component. This may requires child components(nested) to have better maintainability.(Such as EmployeeListComponent and EmployeeDetailsComponent)
• So EmployeeListComponent will display all the employee data whereas EmployeeDetailsComponent will display the details of Particular Employee.

How do we Create Nested Components:

Step 1:

• Create root component Called Employee using the following command

ng g c Employee

Step 2: 

• Create EmployeeList Component inside EmploeeComponent using the following command

ng g c Employee/EmployeeList

 Step 3: 

• Similarly create EmployeeDetailsComponent inside the EmployeeListComponent using the following command

ng g c Employee/EmployeeList/EmployeeDetails

Final Project Structure :

Conclusion: 

• Through command creating nested component is super easy.
• Edit the component content to display your own content.

Stay tuned. Happy Learning!!