What are nested components?

One component in angular can have multiple child components and the child components can also have further their own child components. In this way angular flawlessly supports nested components hierarchy. Just take an example of a calculator, in this calculator is our main component. Calculator is built with various other child components like buttons, screen, battery, body etc. All these buttons, screen, battery, body components were nested components of the calculator.

Angular applications will have a root component which is called AppComponent or AppRoot. This AppComponent acts as a container that holds child components.

We are going to break up our app into a root AppComponent, this component won’t have any functionality and will just contain other components. This component will hold our ItemListComponent and our ItemListComponent will hold a list of ItemComponent.

Therefore, our components will nest something like the below diagram: