Angular 2 Template Syntax

 

  • Template is the View part of our Component. The main role of a template is to display data and apply changes when a user event arrives. The control of data is granted by the Data Binding mechanism.
  • The Data used inside a Template is located in a Class. (Properties)
  • To write a good Template we need to learn the angular 2 Syntax.

Example Angular 2 Component Syntax:

angular 2 syntax example
angular 2 syntax example

 

Angular 2 HTML Template
Angular 2 HTML Template

 

HTML is the langue used to write Angular 2 Templates.

The tag <script> is not allowed inside your template.

We can call other Components inside our Templates or other Directives like ngFor (to loop ul/li lists)

Example:


<h2> Angular Syntax HTML Example
<h2>


<ul>

<li *ngFor="#car of myCarList; #carId = index">
       {{carId}} {{car}}
    </li>

</ul>

In real life we get values from variables and we show them in the View.

In Angular 2 we can do such thing using something called: Data Binding.

Angular 2 Interpolation
Angular 2 Interpolation

 

The first format of data binding is: interpolation.

{{showMe}} using the double-curly braces we insert strings (after treatment in the class: business logic ) into HTML.

 


<h2>My name is : {{myName}}</h2>

<span style="color:{{textColor}};">I change my color</span>

The text we have between the {{textExp}} is considered as an expression.



5 + 5 equals {{5 + 5}}

We can call a method inside the {{ doSomeThing() }} and the result of the method is added to string.



Please calculate the total: {{theTotal()}}

 

Angular 2 Template Expression
Angular 2 Template Expression

 

Let’s talk more about Template expressions {{expression}} or [property]=”expression”

  • The expression returns a value; this value is attached to a target (HTML Element, Component or Directive)
  • We can write the expression in this way: [property]=”expression”.
<input type="text" value="inputValue" #iAmAVariable > Show my value : {{iAmAVariable.value}}

Where property can be src in image HTML element .

If you come from JavaScript some expression are not allowed in Angular 2:

(=) (+=) ( -=) (new ) (;) (,) (++) (–) (|) (&)

In Angular 2 | is used for Pipe reason.

  • Expression context : when we write

    My name is : {{myName}}

We know that myName is a property within our component.

 

Angular 2 Template Statement
Angular 2 Template Statement

 

Template statements: e.g. (click)=”changeMyColor()” / (event)=”statement”

Statements are the response on a user event.

 


Angular 2 Color Change

 

Some keywords are not allowed: (new) (++) (–) (+=) (-=) (|) (&)

  • Statement context: when we fire the event (click)=”changeMyColor()” we are sure that the changeMyColor() is part of our Component.

 

Angular 2 Directives
Angular 2 Directives

 

  • Angular 2 ready to use directives:

The power of Angular 2 binding makes it unnecessary to have a big number of directives.

Instead of creating a directive to handle the click event we can just bind this event to a method in our class like:

Angular 2 Color Change

Let’s see some build in directives that are integrated with angular 2:

  • NgClass

An HTML element needs CSS classes to change its appearance. In real life we frequently need to change the element appearance programmatically (or dynamically).

To add or remove classes from an element we can use NgClass directive.

<!-- NgClass -->
<span [ngClass]="configClasses()">Angular 2 ngClass directive</span> 
<!-- /NgClass -->

Bind NgClass to a key:value object (in our example : cssClasses)t in order to apply or not a class. The value can be true or false.

For a single class use this syntax:

<span [class.successClass]="isSuccess">Angular 2 single css class</span>

 

  • NgStyle

We can set programmatically styles for our HTML elements using the NgStyle directive:

 

<!-- NgStyle -->
<span [ngStyle]="configStyles()">Angular 2 ngStyle directive</span> 
<!-- /NgStyle -->

Bind NgStyleto a key:value object (in our example : cssStyles) in order to apply or not a style. The value can be true or false.

For a single style use this syntax:

<span [style.fontColor]="isSuccess ? 'blue' : 'black'">Angular 2 single css class</span>

 

  • We will discover other directives in other tutorials later.

Go to next step and discover the Angular 2 Data Binding Syntax:

Angular 2 Data Binding
Angular 2 Data Binding