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 {{ }} interpolation, we bound the variable to the template.

Run the app, and you should see the following output:

In the next section, you will learn in...