Templates

Templates are used to bind the component logic to the HTML. Templates are also used as an interface between the user interaction of the user and app logic.

Templates have changed quite a bit when compared to version 1 of Angular. But there are a few things that still remain the same. For instance, the way we take a value from a component and display it in the user interface remains the same with the double curly brace notation (interpolation syntax).

The following is a sample app.component.ts:

@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
  // This is where we write the component logic! 
  title = 'Hello World!'; 
}

The app.component.html would look something like this:

<h1>
{{title}} <!-- This value gets bound from app.component.ts -->
</h1>

Templates can also be made inline by passing in the template metadata to the decorator instead of templateUrl. This would look something like this:

 @Component({ 
  selector: 'app-root', 
  template: '<h1>{{title}}</h1>', 
  styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
  // This is where we write the component logic! 
  title = 'Hello World!'; 
}

The template metadata takes higher priority over templateUrl. For example, if we have defined both a template and templateUrl metadata, template is picked up and rendered.
We can also write multiline templates using backtick(`) instead of quotes, in both ES6 as well as TypeScript. For more information, refer to Template Literals: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals

In Angular 1.x, we have core/custom directives. But in Angular (2), we have various notations, using which we achieve the same behavior of a directive from Angular 1.

For instance, if we want to add a custom class to an element based on the truthiness of an expression, it would look this:

<p [class.highlight]="shouldHighlight">Hair!</p>

The preceding is a replacement for the famous ng-class Angular 1.x directive.

To handle events, we use the ( ) notation, as in:

<button (click)=pullHair($event)">Pull Hair</button>

And this pullhair() is defined inside the component class.

To keep the data bindings up to date, we use the [( )] notation, as in:

<input type="text" [(ngModel)]="name">

This keeps the name property in the component class in sync with the textbox.

An example of *ngFor, which is a replacement for ng-repeat, is shown here:

<ul> 
  <li *ngFor="let todo in todos">{{todo.title}}</li> 

</ul>

Note that let in front of todo indicates that it is a local variable in that zone.

These are some of the basic concepts that we need to get started with our hands-on example. I will talk about other Angular (2) concepts as and when they appear in our app.