Templates

In Angular, a template is a blueprint for a fragment of a user interface (UI). Templates are written in HTML, and special syntax can be used within a template to build on many of Angular's features.

Almost all HTML syntax is valid template syntax. However, because an Angular template is only a fragment of the UI, it does not include elements such as <html>, <body>, or <base>, and also to eliminate the risk of script injection attacks, it does not support the <script> element in templates.

Template Statements

  • Template statements are methods or properties that you can use in your HTML to respond to user events.

  • With template statements, your application can engage users through actions such as displaying dynamic content or submitting forms.

  • Template statements are used with elements, components, or directives in response to events.

Syntax

  • the parser for template statements differs from the parser for template expressions.

  • the template statements parser specifically supports both basic assignment (=) and chaining expressions with semicolons (;).

  • The following JavaScript and template expression syntax is not allowed:

    • new keyword

    • operators such as ++ , -- , += , -= , | and &

Binding

Event Binding

  • Event binding lets you listen for and respond to user actions such as keystrokes, mouse movements, clicks, and touches.

The event binding listens for the button's click events and calls the component's onSave() method whenever a click occurs.

Two-way Binding

Use two-way binding to listen for events and update values simultaneously between parent and child components.

In two-way databinding, automatic synchronization of data happens between the Model and the View and changes is reflected in both components.

Last updated