The component selector

As we have seen in the first example of this chapter, the selector that we defined in the component decorator becomes an element that renders to the DOM. Before we explore our selector options, let's understand how Angular renders this component.

As we discussed in Chapter 1, Angular 2 Component Architecture, an Angular 2 application can be described as a tree of components. Like any other tree structure, there is only one root node. Currently in our project we got only one component, which is used as the tree node.

With this information, let's see how Angular instantiates our root component and renders it:

Under the src/app directory in the project root, locate and open the app.module.ts file. This file contains the definition of the root module of the application:

[app.module.ts]
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'...