@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 `