Components are the main building blocks in Angular.
A typical Angular application is represented by a tree of elements starting with a single root one.
<app-root> <app-header title="My header"> <!-- ... --> </app-header> <app-layout type="horizontal"> <app-sidebar> <!-- ... --> </app-sidebar> <app-content> <!-- ... --> </app-content> </app-layout> <app-footer> <!-- ... --> </app-footer> </app-root>
As you can see from the markup above, our main application template consists at least of the following six components:
Schematically it should look similar to the following: