@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}
### Table of contents
This guide covers the basic elements of the Angular template syntax, elements you'll need to construct the view:
* [HTML in templates](#html)
* [Interpolation ( {{...}} )](#interpolation)
* [Template expressions](#template-expressions)
* [Template statements](#template-statements)
* [Binding syntax](#binding-syntax)
* [Property binding ( [property] )](#property-binding)
* [Attribute, class, and style bindings](#other-bindings)
* [Event binding ( (event) )](#event-binding)
* [Two-way data binding ( [(...)] )](#two-way)
* [Built-in directives](#directives)
* [Attribute directives](#attribute-directives)
* [NgClass](#ngClass)
* [NgStyle](#ngStyle)
* [NgModel ([(ngModel)]) ](#ngModel)
* [Structural directives](#structural-directives)
* [NgIf](#ngIf)
* [NgFor](#ngFor)
* [Template input variables](#template-input-variables)
* [microsyntax](#microsyntax)
* [The NgSwitch directives](#ngSwitch)
* [Template reference variables ( #var )](#ref-vars)
* [Input and output properties ( @Input and @Output )](#inputs-outputs)
* [Template expression operators](#expression-operators)
* [pipe ( | )](#pipe)
* [safe navigation operator ( ?. )](#safe-navigation-operator)
The