Interacting with the template
In Chapter 1, Building Your First Angular App, we saw how Angular displays HTML content from components, but we didn't even scratch the surface of template development for Angular. As we will see later in this book, template implementation is tightly coupled with the principles of Shadow DOM design, and it brings out a lot of syntactic sugar to ease the task of binding properties and events in our views in a declarative fashion. Let's first take a look at how an Angular component can interact with its template either by displaying and getting data from it or by applying styles to it.
Displaying data from the component
We have already stumbled upon interpolation to display a property value from the class component to the template:
<span>{{ title }}</span>
Angular converts the title component property into text and displays it on the screen. An alternate way to perform interpolation is to bind title to the innerText...