Angular 13: How to Nest a Component Inside Another Component
May 28, 2022
(This example is explained for Visual Studio 2022)
Start an application as described in my Angular .NET Core SQL Server Application in Visual Studio 2022 tutorial here. (It is not necessary to configure for database connectivity as we will not be doing that here).
Right click on the angular project in Visual Studio and select Open in terminal. In the Power Shell that appears run the following two commands and create two components.
ng g c home
ng g c test
In the home.component.html file add the following code.
<app-test></app-test><p>home works!</p>
The test component is nested inside the home component.
It’s as simple as that!