block includes
include ../_util-fns
//- The docs standard h4 style uppercases, making code terms unreadable. Override it.
style.
h4 {font-size: 17px !important; text-transform: none !important;}
.syntax { font-family: Consolas, 'Lucida Sans', Courier, sans-serif; color: black; font-size: 85%; }
h4 .syntax { font-size: 100%; }
:marked
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
:marked
### 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)
* [Built-in attribute directives](#attribute-directives)
* [NgClass](#ngClass)
* [NgStyle](#ngStyle)
* [NgModel ([(ngModel)]) ](#ngModel)
* [Built-in 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
demonstrates all of the syntax and code snippets described in this guide.
.l-hr
a#html
:marked
## HTML in templates
HTML is the language of the Angular template.
Almost all HTML syntax is valid template syntax.
The `