Angular is based on components. Components are built with other components and normal HTML tags. Our application will have three components: the forecast page, the about page, and the whole widget. The widget itself, which is referenced in the HTML page, will use the other two widgets.
The widget will show the About page in the third tab, as you can see in the following screenshot:
The forecast component is shown in the first tab of the following screenshot. We will create the forecast and the widget later in this chapter.
A component is a class decorated with some metadata. Decorators are functions that can modify a class or decorate it with some metadata. A simple component that does not have any interaction will look like this:
import { Component } from "angular2/core";
@Component({
selector: "about-page",
template: `
<h2>About</h2>
This widget shows the weather forecast of Utrecht.
...