Creating the first component

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.

The template

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. 
    The next 24 hours are shown under 'Today' and the forecast of        24-48 hours ahead under 'Tomorrow'. 
  ` 
}) 
export class About { 
   
} 

Tip

As a convention, you can always choose selector names with a dash (-). You can then identify components by the dash. Normal HTML tags will never have names with a dash.

This component will be the about page selector of our application. We will modify it in the next sessions. We will use one file per component, so we save this as lib/about.ts.

Testing

We can test the component by calling the bootstrap function. We create a new file, lib/index.ts, which will start the application:

import "zone.js"; 
import "rxjs"; 
import "reflect-metadata"; 
import "es6-shim";  
import { bootstrap } from "angular2/platform/browser"; 
import { About } from "./about"; 
 
bootstrap(About).catch(err => console.error(err)); 

Tip

The .catch section will show errors in the console. If you do not include that call, you will not see those errors and that can be pretty frustrating.

We must change the weather-widget tag in static/index.html to an about-page tag. Now, we can run gulp and open index.html in a browser to see the results.

At the time of writing this, when you run this command, you get an error when saying that the type definition of zone.js is incorrect. You can ignore this error as it is a bug of zone.js.

Tip

Test early

It's always a good idea to test during development. If you test after writing a lot of code, you will discover issues late, and it will take more work to repair them. Every time that you want to test the project, you must first run gulp and then open or refresh index.html.

Interactions

We can add an interaction inside the class body. We must use bindings to connect the template to definitions in the body. There are three different bindings:

• One-way variable binding
• One-way event listener
• Two-way binding

A one-way binding will connect the class body and template in one direction. In case of a variable, changes of the variable will update the template, but the template cannot update the variable. A template can only send an event to the class. In case of a two-way binding, a change of the variable changes the template and a change in the template will change the variable. This is useful for the value of an input element, for example. We will take a look at one-way bindings in the next section.

One-way variable binding

In the first attempt of the about page, the location (Utrecht) is hardcoded. In the final application, we want to choose our own location. The first step we will take is to add a property to the class that contains the location. Using a one-way binding, we will reference that value in the template. A one-way variable binding is denoted with brackets inside attributes and double curly brackets inside text:

import { Component } from "angular2/core"; 
 
@Component({ 
  selector: "about-page", 
  template: ` 
    <h2>About</h2> 
    This widget shows the weather forecast of 
    <a [href]="'https://maps.google.com/?q=' + encodedLocation"> 
      {{ location }} 
    </a> 
    The next 24 hours are shown under 'Today' and the forecast        of 24-48 hours ahead under 'Tomorrow'. 
    ` 
}) 
export class About { 
  location = "Utrecht"; 
 
  get encodedLocation() { 
    return encodeURIComponent(this.location); 
  } 
} 

Tip

At the time of writing this, templates aren't checked by TypeScript. Make sure that you write the correct names of the variables. Variables should not be prefixed by this., like you would do in class methods.

You can add an expression in such bindings. In this example, the binding of the href attribute does string concatenation. However, the subset of expressions is limited. You can add more complex code inside getters in the class, as done with encodedLocation.

Tip

You can also use a different getter, which would encode the location and concatenate it with the Google Maps URL.

Event listeners

Event bindings can connect an event emitter of a tag or component to a method of a function. Such binding is denoted with parenthesis in the template. We will add a show-more button to our application:

import { Component} from "angular2/core"; 
 
@Component({ 
  selector: "about-page", 
  template: ` 
    <h2>About</h2> 
    This widget shows the weather forecast of 
    <a [href]="'https://maps.google.com/?q=' + encodedLocation"> 
      {{ location }} 
    </a>. 
    The next 24 hours are shown under 'Today' and the forecast        of 24-48 hours ahead under 'Tomorrow'. 
    <br /> 
 <a href="javascript:;" (click)="show()">Show more</a> 
 <a href="javascript:;" (click)="hide()">Show less</a> 
    ` 
}) 
export class About { 
  location = "Utrecht"; 
 collapsed = true; 
 show() { 
 this.collapsed = false; 
 } 
 hide() { 
 this.collapsed = true; 
 } 
 
  get encodedLocation() { 
    return encodeURIComponent(this.location); 
  } 
} 

The show() or hide() function will be called when one of the show or hide links is clicked on.