@title
Template Syntax
@intro
Learn how to write templates that display data and consume user events with the help of data binding.
@description
The Angular application manages what the user sees and can do, achieving this through the interaction of a
component class instance (the *component*) and its user-facing template.
You may be familiar with the component/template duality from your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM).
In Angular, the component plays the part of the controller/viewmodel, and the template represents the view.
{@a toc}
### Contents
This guide covers the basic elements of the Angular template syntax, elements you'll need to construct the view:
* [HTML in templates](guide/template-syntax#html)
* [Interpolation ( {{...}} )](guide/template-syntax#interpolation)
* [Template expressions](guide/template-syntax#template-expressions)
* [Template statements](guide/template-syntax#template-statements)
* [Binding syntax](guide/template-syntax#binding-syntax)
* [Property binding ( [property] )](#property-binding)
* [Attribute, class, and style bindings](guide/template-syntax#other-bindings)
* [Event binding ( (event) )](guide/template-syntax#event-binding)
* [Two-way data binding ( [(...)] )](#two-way)
* [Built-in directives](guide/template-syntax#directives)
* [Built-in attribute directives](guide/template-syntax#attribute-directives)
* [NgClass](guide/template-syntax#ngClass)
* [NgStyle](guide/template-syntax#ngStyle)
* [NgModel ([(ngModel)]) ](#ngModel)
* [Built-in structural directives](guide/template-syntax#structural-directives)
* [NgIf](guide/template-syntax#ngIf)
* [NgFor](guide/template-syntax#ngFor)
* [Template input variables](guide/template-syntax#template-input-variables)
* [Microsyntax](guide/template-syntax#microsyntax)
* [The NgSwitch directives](guide/template-syntax#ngSwitch)
* [Template reference variables ( #var )](guide/template-syntax#ref-vars)
* [Input and output properties ( @Input and @Output )](guide/template-syntax#inputs-outputs)
* [Template expression operators](guide/template-syntax#expression-operators)
* [pipe ( | )](guide/template-syntax#pipe)
* [safe navigation operator ( ?. )](guide/template-syntax#safe-navigation-operator)
The
demonstrates all of the syntax and code snippets described in this guide.
{@a html}
## HTML in templates
HTML is the language of the Angular template.
Almost all HTML syntax is valid template syntax.
The `