{ "id": "guide/template-syntax", "title": "Template syntax", "contents": "\n\n\n
In Angular, a template is a chunk of HTML.\nWithin a template, you can use special syntax to leverage many of Angular's features.
\nBefore learning template syntax, you should be familiar with the following:
\nEach Angular template in your app is a section of HTML that you can include as a part of the page that the browser displays.\nAn Angular HTML template renders a view, or user interface, in the browser, just like regular HTML, but with a lot more functionality.
\nWhen you generate an Angular app with the Angular CLI, the app.component.html
file is the default template containing placeholder HTML.
The template syntax guides show you how you can control the UX/UI by coordinating data between the class and the template.
\nMost of the Template Syntax guides have dedicated working example apps that demonstrate the individual topic of each guide.\nTo see all of them working together in one app, see the comprehensive
With special Angular syntax in your templates, you can extend the HTML vocabulary of your apps.\nFor example, Angular helps you get and set DOM (Document Object Model) values dynamically with features such as built-in template functions, variables, event listening, and data binding.
\nAlmost all HTML syntax is valid template syntax.\nHowever, because an Angular template is part of an overall webpage, and not the entire page, you don't need to include elements such as <html>
, <body>
, or <base>
.\nYou can focus exclusively on the part of the page you are developing.
To eliminate the risk of script injection attacks, Angular does not support the <script>
element in templates.\nAngular ignores the <script>
tag and outputs a warning to the browser console.\nFor more information, see the Security page.
You may also be interested in the following:
\n@Input()
decorators.|
, and protect against null
or undefined
values in your HTML.