include ../_util-fns // #docregion intro :marked Our Angular application manages what the user sees and does through the interaction of a Component class instance (the *component*) and its user-facing template. Many of us are familiar with the component/template duality from our 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. Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax: * [HTML](#html) * [Interpolation](#interpolation) * [Template expressions](#template-expressions) * [Template statements](#template-statements) * [Binding syntax](#binding-syntax) * [Property binding](#property-binding) * [Attribute, class, and style bindings](#other-bindings) * [Event binding](#event-binding) * [Two-way data binding with `NgModel`](#ngModel) * [Built-in directives](#directives) * [NgClass](#ngClass) * [NgStyle](#ngStyle) * [NgIf](#ngIf) * [NgSwitch](#ngSwitch) * [NgFor](#ngFor) * [* and <template>](#star-template) * [Local template variables](#local-vars) * [Input and output properties](#inputs-outputs) * [Template expression operators](#expression-operators) * [pipe](#pipe) * ["elvis" (?.)](#elvis) // #enddocregion intro .l-sub-section :marked The [live example](/resources/live-examples/template-syntax/ts/plnkr.html) demonstrates all of the syntax and code snippets described in this chapter. // #docregion html-1 .l-main-section :marked ## HTML HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application had a template that was pure HTML: // #enddocregion html-1 +makeExample('template-syntax/ts/app/app.component.html', 'my-first-app')(format=".") // #docregion html-2 :marked Almost all HTML syntax is valid template syntax. The `