Components are a key part of every modern UI framework. The idea is simple: you decompose the application visually into smaller encapsulated and reusable units, called components.

Let's review the auto-generated AppComponent component:

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   title = 'app';
 }

Just like modules, Angular components are classes with an @Component decorator. The decorator receives a configuration object with the following relevant key properties:

• selector: This is the selector element associated with the given component. This selector is used in templates where this component should be displayed. Since this is the root component, you can find the use of this selector in the index.html file, which indicates where the root of the application should be mounted.
• templateUrl: This is the relative path to the component's template. Every component must have a template, which is essentially its HTML view.
• template: As an alternative to templateUrl, you can use the template property to specify the component's template inline, and not separate it to a different file.
• styleUrls: An array of relative paths to the component's styles. A component can have several separate CSS files.
• styles: In addition to styleUrls, you can use the styles property to specify inline CSS as an array of strings.

In this chapter, you're going to implement the following components in their corresponding module as mentioned in the brackets:

• AppComponent (AppModule)
• HeaderComponent (SharedModule)
• BusyComponent (SharedModule)
• ProductsPageComponent (MarketModule)
• CategoryMenuComponent (MarketModule)
• CategoryMenuItemComponent (MarketModule)
• ProductListComponent (MarketModule)
• ProductCardComponent (MarketModule)

The following diagram depicts the component hierarchy and dependency graph that you're going to implement in this chapter: