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 property of the span HTML element, a method called property binding:

<span [innerText]="title"></span>

Notice that we bind to the Document Object Model (DOM) property of an element, not an HTML attribute, as it looks at first sight. The property inside square brackets is called the target property and is the property of the DOM element into which we want to bind. The variable on the right is called the template expression and corresponds to the public title property of the component. If the property is not public, the template will not be able to use it.

Important Note

When we open a web page in the browser, it parses the HTML content of the page and converts it into a tree structure, the DOM. Each HTML element of the page is converted to an object called a node, which represents part of the DOM. A node defines a set of properties and methods that represent the API of this object. innerText is such a property, which is used to set the text inside of an HTML element.

To better understand how the Angular templating mechanism works, we need to first understand how Angular interacts with attributes and properties. It defines attributes in HTML to initialize a DOM property, and then it uses data binding to interact with the property directly.

To set the attribute of an HTML element, we use the attr- syntax through property binding. For example, to set the aria-label attribute of an HTML element, we would write the following:

<p [attr.aria-label]="myText"></p>

Here, myText is a property in the corresponding Angular component. Remember that property binding interacts with properties of Angular components. Therefore, if we would like to set the value of the innerText property directly to the HTML, we would write the text value surrounded by single quotes:

<span [innerText]="'My title'"></span>

In this case, the value passed to the innerText property is a static string, not a component property.

Property binding is a convenient technique not only for display but also for style purposes.

Applying styles to the template

Styles in a web application can be applied either using the class or the styles attribute of an HTML element:

<p class="star"></p>

<p style="color: greenyellow"></p>

The Angular framework provides two types of property binding to set both of them dynamically, class binding and style binding. We can apply a single class to an HTML element using the following syntax:

<p [class.star]="isLiked"></p>

The star class will be added to the paragraph element when the isLiked expression is true. Otherwise, it will be removed from the element. If we want to apply multiple classes simultaneously, we can use the following syntax:

<p [class]="currentClasses"></p>

The currentClasses variable is a property of the component class and can be one of the following:

• A space-delimited string of class names such as 'star, active'.
• An object with keys as the class names and values as boolean conditions for each key. A class is added to the element when the value of the key, with its name, evaluates to true. Otherwise, the class is removed from the element:

  currentClasses = {

    star: true,

    active: false

  };

Instead of styling our elements using CSS classes, we can set styles directly to them. Similar to the class binding, we can apply single or multiple styles simultaneously using a style binding. A single style can be set to an HTML element using the following syntax:

<p [style.color]="'greenyellow'"></p>

The paragraph element will have a greenyellow color. Some styles can be expanded further in the binding, such as the width of the paragraph element, which we can define with the measurement unit:

<p [style.width.px]="100"></p>

The paragraph element will be 100 pixels long. If we need to toggle multiple styles at once, we can use the object syntax:

<p [style]="currentStyle"></p>

currentStyle can be a string with styles separated by a semicolon:

currentStyle = 'color: greenyellow; width: 100px';

Alternatively, it can be an object where keys are the names of styles and values the actual style values:

currentStyle = {

  color: 'greenyellow',

  width: '100px'

};

Class and style bindings are powerful features that Angular provides out of the box when it comes to styling our components. An equally compelling feature is the ability to read data from a template into the component class.

Getting data from the template

In the previous section, we learned how to use property binding to display data from the component class. Real-world scenarios usually involve bidirectional data flow through components. To get data from the template back to the component, we use a method called event binding. Consider the following HTML snippet:

<button (click)="onClick()">Click me</button>

An event binding listens for DOM events that occur on the target HTML element and responds to those events by calling corresponding methods in the component. In this case, when the user clicks the button, the component calls the onClick method. The event inside parentheses is called the target event and is the event that we are listening to.

It supports native DOM events that can be found at https://developer.mozilla.org/en-US/docs/Web/Events.

The variable on the right is called the template statement and corresponds to the onClick public method of the component. Component methods must be public for the template to be able to call them:

Figure 3.3 – Component-template interaction

In the previous diagram, you can see an overview of how the component interacts with its template bidirectionally. The same principle is followed when we want to communicate between components.