Template and Data Binding Syntax

In this chapter, you will learn about Template Syntax and Data Binding provided by the Angular framework. Template Syntax and Data Binding mainly focus on the UI or view aspects of the application; hence, it is a very important and crucial functionality.

In this chapter, you will learn about Template Syntax and the different ways to include a template in our components. You will also learn to create components, including child components, and use expressions and operators inside the view template. You will also focus on how to attach events, attributes, and implement directives inside the templates.

Data Binding is one of the key features of Angular and allows us to map data from the source to the view target and vice versa. You will learn about different ways of Data Binding.

In this chapter, you will learn to include view template and define...

Learning about Template Syntax

The components view is defined using a template, which tells Angular how to render the look. Inside the template, we define how the data should appear and also attach events using Data Binding.

Most HTML tags can be used inside the Angular template. We can use and define user-defined custom directives.

The general syntax of defining a template for a component is as follows:

import {Component, View} from "@angular/core";

@Component({
 selector: 'my-app',
 template: `<h2>{{ title }}</h2>`
})

export class MyTemplateComponent {
 title = 'Learning Angular!!!'
}

Let's analyze the preceding code snippet in detail:

1. We defined a component, MyTemplateComponent.
2. We defined the component view with template.
3. Inside the template, we defined a <h2> tag.
4. We defined a title variable and assigned a value.
5. Using the...

Angular Data Binding

Angular provides a mechanism to share data between the same view and model easily. We can associate and assign a value in a class component and use it in the view. It provides many kinds of Data Binding. We will start by understanding the various Data Bindings available and then move on to create some examples.

Data Bindings can be grouped into three main categories:

1. One-way Data Binding, that is, from data source to view.
2. One-way Data Binding, that is, from view to data source.
3. Two-way Data Binding, that is, from view target to data source and from data source to view.

One-way Data Binding - Data source to view

In this section, you will learn about One-way Data Binding from data source to view target...

Summary

Template Syntax and Data Binding are the skeleton and soul of Angular applications. We covered templates: how to include them in different ways and use expressions inside view templates. We then walked through templates by attaching events and attributes to them.

We explored aspects of Data Binding in Angular applications and focused on how to implement Data Binding for values inside the template.

In Data Binding, we delved into its broad categories. We explored available ways of Data Bindings: One-way Data Binding and Two-way Data Binding.

Using Data Binding and templates together, we can almost create mock functional screens for our Angular applications: that's the power of Data Binding and Template Syntax.

So, go ahead and let your creativity fly! Good luck.

In the next chapter, you will learn about advanced forms in Angular, learn how to use and master reactive...