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-header title="My header">
        <!-- ... -->

    <app-layout type="horizontal">

            <!-- ... -->

            <!-- ... -->


        <!-- ... -->


As you can see from the markup above, our main application template consists at least of the following six components:

  • app-root
  • app-header
  • app-layout
  • app-sidebar
  • app-content
  • app-footer

Schematically it should look similar to the following:

App Structure with Components