In the previous chapter, we've seen what component templates are and how to create them. However, so far, we've only seen static HTML. In this section, I'd like to zoom in a little and take a look at some template syntax with you that allows us to create dynamic HTML, which, of course, is one of the main goals of Angular.

Templating syntax in Angular provides us with a mechanism to make our HTML dynamic—specifically, for data binding, property binding, and event binding. We'll be taking a look at these three types of binding in this chapter. The way in which Angular gives us the power to create templates that produce dynamic HTML, or to manipulate the DOM (more on this in just a little bit), is through a set of symbols.

Here are the six basic symbols that we can use:

• {{ }} for string interpolation and one-way data binding
• [( )] for two-way data binding
• # for variable declaration
• ( ) for event binding
• [ ] for property binding
• * prepends structural directives, such as ngFor, as we'll see