Components

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 selectorelement 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...