Setting the Stage

Angular HTML templates provide a structured way of binding data exposed by Angular components to the end-user. For instance, this example shows making a drop-down calendar with particular controls. Think of it like any other input form control in that it is going to render the UI and provide the backing logic.

<dd-calendar dd-height=”400px” dd-width=”600px”
      [dataset]=”calData.EVENTS”
      (selection)=”onSelection($event)”>
</dd-calendar>

In this example, the calData is defined on the current component and is passing the EVENTS data into the dd-calendar widget. There are multiple different constructs in Angular HTML templates, though the most common are for inputs and outputs:

• [dataset] — provides bound data into the component.
• (selection) — provides output from the component back into this class.

In addition to providing information in and out of a component, the template allows for expressions inside the HTML blocks, such as:

<h1>{{title}}</h1>
<h2>{{subtitle}}</h2>

In this example, the title and subtitle values would come from the Angular component. More interestingly however, these are bindings, so that updating the title inside the component will immediately cause the value to be updated in the UI.

To learn how HTML templates and TypeScript files go hand in hand, see Creating an Angular Component.

Automatic Validation of Angular Templates

When working with Angular HTML templates, the Angular IDE will provide automatic validation of the templates while in development. Upon save, the Angular IDE confirms both the syntax and semantic integrity of the template and shows in the editor any files detected. In addition, Angular IDE will provide this validation over all files in the project helping detect problems not yet seen in the editor or at runtime.

There are multiple types of validation, though broken down into two main categories. Syntax and semantic validation as explained below. The validation is performed on both inline and external templates.

Syntax Validation

The core responsibility of syntax validation is to check the integrity of the template under development. Angular IDE will detect missing structural elements, such as a missing </div> tag, as well as validate that the custom <app-style elements have the expected input or output fields. Syntax validation even confirms that the directives provide the necessary custom tags for the extended constructs that Angular enables.

The full list of constructs validated syntactically include:

• Incorrect HTML structure and syntax
• Unknown tags or components used
• Unknown input/output bindings or attributes
• Invalid syntax of expression

Semantic Validation

The responsibility of semantic validation is to interpret expressions and other complex structures in the HTML template file. Expressions are key to well-functioning templates and provide the ability for everything from for loops, to dynamic bindings.

The most common mistakes in developing Angular HTML templates include inconsistency between fields exposed and consumed, and typos in the expressions. Semantic validation helps rapidly detect these issues by validating the expressions and code constructs against the corresponding TypeScript classes.

The full list of code blocks validated semantically include:

• Expressions used inside {{ }} blocks
• Semantic structures used in attributes such as ngFor
• Binding expressions

In addition to template validation, the semantic validation will ensure the integrity of both inline and standalone HTML templates, as well as check consistency of the @Component declaration that use the templates.

Detected errors on @Component annotation

• Template and templateUrl attributes validation:
   – Missing file referenced through templateUrl
   – Both or none of template and templateUrl attributes are present
   – Discouraged usage of absolute template paths
   – Suggestion to change template attribute to templateUrl if it contains existing file name

• Component present in more than one module or not present in any module

This semantic validation of @Component declarations helps ensure that not only are the templates being developed are well defined, but setup for correct consumption at runtime by the corresponding TypeScript components.

Code Completion for Angular HTML Templates

Beyond validation, the initial release of Angular IDE includes code completion inside Angular HTML templates. While code completion is being introduced in an experimental fashion in the first CI release, it is available for completion of expressions allowing for quicker population of data being used inside templates.

Coming in future CI releases include significantly enhanced code completion including complex assistance inside structured expressions of templates.