Using decorators to build and style a simple component

When writing an application component in TypeScript, there are several new paradigms that you must become familiar and comfortable with. Though possibly intimidating initially, you will find that you'll be able to carry over much of your comprehension of Angular 1 directives.

Note

The code and a live example of this are available at http://ngcookbook.herokuapp.com/6577/.

Getting ready

One of the simplest imaginable components we can build is a template element that interpolates some values into its template. In Angular 1, one way this could be achieved was by creating an element directive, attaching some data to the scope inside the link function, and a template that would reference the data. I selected this description specifically because nearly all those concepts have been binned.

Suppose you want to create a simple article component with a pseudo template as follows:

<p>{{date}}</p> 
<h1>{{title}}</h1> 
...