Angular 04: Angular Templates

7 min readSep 4, 2026

Introduction

In the previous lesson, we learned about Angular components and how a component is made up of TypeScript, HTML, and CSS. We also saw how components can communicate with each other. Now it is time to understand one of the most important parts of an Angular component: the template.

An Angular template looks like normal HTML, but it can do much more than display static content. It can read values from TypeScript, change HTML properties, respond to user actions, and keep data synchronized with form controls. Angular provides a special template syntax that creates a dynamic connection between the component and the user interface. (Angular)

Get Mubbassir Khan Jahagirdar’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In this lesson, we will learn the four basic types of binding that every Angular beginner should understand: interpolation, property binding, event binding, and two-way binding.

What Is an Angular Template?

A template is the HTML that Angular uses to create the user interface of a component. For example, our app.html might contain:

<h1>Welcome to Angular</h1>
<p>This is my first Angular application.</p>

This is normal HTML. But Angular templates can also communicate with the TypeScript class behind the component. For example, if our app.ts contains:

export class App {
  name = 'John';
}

we can use that value inside the HTML:

<h1>Hello {{ name }}</h1>

Angular replaces {{ name }} with the actual value and keeps the binding updated when the underlying data changes (Angular). This connection between TypeScript and HTML is called data binding.

Understanding Data Binding

You can think of data binding as a connection between our component’s data and the HTML displayed in the browser. There are four important forms we will learn:

Let’s understand each one with simple examples.

1. Interpolation

Interpolation is probably the easiest Angular binding to understand. It uses double curly braces:

{{ value }}

We use interpolation when we want to display a value from the component inside the HTML. For example:

`app.ts`

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  name = 'John';
  course = 'Angular 22';
}

`app.html`

<h1>Hello, {{ name }}!</h1>
<p>You are learning {{ course }}.</p>

Angular reads the values from the TypeScript class and displays them in the template. The browser will show:

Hello, John!
You are learning Angular 22.

We can also use simple expressions inside interpolation. For example:

<p>2 + 3 = {{ 2 + 3 }}</p>

The result will be:

2 + 3 = 5

Interpolation is mainly used when we want to display dynamic text. Angular’s documentation describes {{ }} as text interpolation, where Angular evaluates the expression and renders its result. (Angular)

2. Property Binding

Sometimes we don’t want to display text. Instead, we want to dynamically change a property of an HTML element. This is where property binding comes in. Property binding uses square brackets:

[property]="value"

For example, consider a button. HTML has a disabled property that controls whether the button can be clicked. In TypeScript:

isDisabled = true;

We can connect it to the button:

<button [disabled]="isDisabled">
  Submit
</button>

When isDisabled is true, the button is disabled. If we change it to:

isDisabled = false;

the button becomes enabled. The square brackets tell Angular that the value should come from the component rather than being treated as a normal static HTML value. Angular’s property binding connects dynamic values to DOM properties and updates them when the value changes (Angular).
Another simple example is an image:

imageUrl = 'https://example.com/angular.png';
<img [src]="imageUrl" alt="Angular">

Here Angular takes the value of imageUrl and assigns it to the image's src property.

Interpolation vs Property Binding

Beginners often get confused between these two. Suppose we have:

name = 'Angular';

To display the name as text, we use interpolation:

<h1>{{ name }}</h1>

But if we want to bind a property, we use property binding:

<img [src]="imageUrl">

A simple way to remember it is:

{{ value }}
     ↓
Display a value as text

[property]="value"
     ↓
Set an element property

Both create a connection between the component and the template, but they are used for different purposes.

3. Event Binding

So far, we have sent information from TypeScript to HTML. But what happens when the user interacts with the page? For example, what should happen when the user clicks a button? This is where event binding comes in. Event binding uses parentheses:

(event)="method()"

For example:

`app.ts`

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  message = 'Click the button';
  showMessage() {
    this.message = 'Button was clicked!';
  }
}

`app.html`

<h1>{{ message }}</h1>

<button (click)="showMessage()">
  Click Me
</button>

When the user clicks the button, Angular calls:

showMessage()

The message value changes, and the displayed text updates. Angular supports event listeners using parentheses around the event name. You can listen for events such as click, keyup, keydown, mouseover, and many other browser events. (Angular)

Using `$event`

Sometimes we also need information about the event itself. Angular provides a special variable called $event. For example:

<input (keyup)="handleKeyup($event)">

Then in TypeScript:

handleKeyup(event: KeyboardEvent) {
  console.log(event);
}

The $event contains information about the event that occurred. For a click event, it could be a MouseEvent. For a keyboard event, it could be a KeyboardEvent. You don’t need to use $event for every event. Use it when you actually need information from the event. (Angular)

4. Two-Way Binding

Now let’s look at the most interesting type of binding. Imagine we have a text box:

<input type="text">

The user types something into it. We want two things to happen:

The value from TypeScript should appear in the input.
When the user changes the input, the TypeScript value should also change.

This is called two-way binding. Angular uses:

[()]

This syntax combines property binding:

[]

and event binding:

()

Together they become:

[()]

Angular’s documentation informally calls this the “banana in a box” syntax. (Angular)

Two-Way Binding with `ngModel`

For a beginner-friendly form example, Angular provides ngModel. First, we need to import FormsModule.

`app.ts`

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  name = 'Mubbassir';
}

Then in the HTML:

`app.html`

<h1>Hello {{ name }}!</h1>
<input
  type="text"
  [(ngModel)]="name"
>
<p>Your name is: {{ name }}</p>

Now type something different into the input. As you type, the name value in the component changes, and the <h1> and <p> automatically display the updated value. The data is flowing in both directions:

         TypeScript
             ↕
         [(ngModel)]
             ↕
         Input Field

Angular’s official documentation explains that [(ngModel)] keeps the form control and component state synchronized, and FormsModule must be imported when using this approach. (Angular)

Complete Example

Let’s put all four concepts together in one small application.

`app.ts`

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [FormsModule],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
name = 'Mubbassir';
  imageUrl = 'https://angular.dev/assets/images/press-kit/angular_icon_gradient.gif';
  isDisabled = false;
  message = 'Welcome to Angular!';
  showMessage() {
    this.message = 'You clicked the button!';
  }
}

`app.html`

<div class="container">
<!-- Interpolation -->
  <h1>Hello, {{ name }}!</h1>
  <!-- Property Binding -->
  <img
    [src]="imageUrl"
    alt="Angular Logo"
    width="100"
  >
  <br><br>
  <!-- Property Binding -->
  <button
    [disabled]="isDisabled"
  >
    Disabled Button
  </button>
  <br><br>
  <!-- Event Binding -->
  <button
    (click)="showMessage()"
  >
    Click Me
  </button>
  <p>{{ message }}</p>
  <!-- Two-Way Binding -->
  <input
    type="text"
    [(ngModel)]="name"
    placeholder="Enter your name"
  >
  <p>Your name is: {{ name }}</p>
</div>

`app.css`

.container {
  max-width: 700px;
  margin: 60px auto;
  text-align: center;
  font-family: Arial, sans-serif;
}
h1 {
  color: #dd0031;
}
input {
  padding: 10px;
  width: 250px;
  margin-top: 20px;
}
button {
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
}

This small example demonstrates all four types of binding.

Interpolation
      ↓
{{ name }}Property Binding
      ↓
[disabled]="isDisabled"
Event Binding
      ↓
(click)="showMessage()"
Two-Way Binding
      ↓
[(ngModel)]="name"

Once you understand these four patterns, Angular templates become much easier to read.

Try It Now in Stackblitz:

A Simple Way to Remember

You can remember Angular’s basic binding syntax using this simple rule:

Angular provides four common ways to connect TypeScript with the HTML template. Interpolation uses {{ }} to display data from TypeScript in the HTML, such as showing a user's name. Property binding uses [ ] to dynamically set a property of an HTML element, such as enabling or disabling a button. Event binding uses ( ) to listen for user actions like clicks and then execute a TypeScript method. Finally, two-way binding uses [()] to keep the TypeScript value and an HTML input synchronized, so changes in one are reflected in the other. Together, these four binding types make Angular templates dynamic and interactive instead of just static HTML.

Conclusion

Angular templates are much more powerful than ordinary HTML because they allow the user interface to communicate directly with the component’s TypeScript code. Interpolation allows us to display dynamic values, property binding lets us dynamically control HTML properties, and event binding allows us to respond to user interactions. (Angular)
We also learned about two-way binding, where data can move in both directions between the component and the user interface. With template-driven forms, [(ngModel)] is a common way to keep an input control synchronized with component data, and it requires FormsModule. (Angular)

These four concepts are some of the most important building blocks of Angular templates. Once you become comfortable with {{ }}, [], (), and [()], you'll start recognizing Angular's template syntax everywhere.

Mubbassir Khan Jahagirdar

Angular 04: Angular Templates

Introduction

Get Mubbassir Khan Jahagirdar’s stories in your inbox

What Is an Angular Template?

Understanding Data Binding

1. Interpolation

app.ts

app.html

2. Property Binding

Interpolation vs Property Binding

3. Event Binding

app.ts

app.html

Using $event

4. Two-Way Binding

Two-Way Binding with ngModel

app.ts

app.html

Complete Example

app.ts

app.html

app.css

A Simple Way to Remember

Conclusion

Written by Mubbassir Khan Jahagirdar

No responses yet

More from Mubbassir Khan Jahagirdar

Angular 01: Setting Up an Angular 22 Project

Introduction

Angular 00: Introduction to Angular 22

Introduction

Angular 19: Angular State Management

Introduction

Angular 18: RxJS with Angular

Introduction

Recommended from Medium

Why We Refactored Our Enterprise App to Angular 22 Signal Forms (And What Broke)

Transitioning a massive enterprise codebase from legacy ReactiveForms (FormGroup, FormBuilder) to Angular 22 Signal Forms is a high-reward…

Stop Turning Every Angular Service Into a BehaviorSubject Store

BehaviorSubject is a great RxJS primitive. It should not automatically become your feature state architecture.

Angular v22.2: Router Resources vs Resolvers — Parallel Data Loading Without the Waterfall 🔥🚀

Let’s be honest: resolvers were never loved, they were tolerated. You wrote one per piece of data, wired it into resolve, and accepted that…

Angular 18: RxJS with Angular

Introduction

Angular 22 Resource API: A Complete Guide to resource(), rxResource() and httpResource()

Working on a web application often involves fetching data from an API, managing state, and ensuring updates happen at the right time.

Building a Reusable Angular Sorting Directive

We already achieved sorting by updating some signal httpResource. All in unison. But making every column sortable has some boilerplate…

No responses yet

More from Mubbassir Khan Jahagirdar

Angular 01: Setting Up an Angular 22 Project

Introduction

Angular 00: Introduction to Angular 22

Introduction

Angular 19: Angular State Management

Introduction

Angular 18: RxJS with Angular

Introduction

Recommended from Medium

Why We Refactored Our Enterprise App to Angular 22 Signal Forms (And What Broke)

Transitioning a massive enterprise codebase from legacy ReactiveForms (FormGroup, FormBuilder) to Angular 22 Signal Forms is a high-reward…

Stop Turning Every Angular Service Into a BehaviorSubject Store

BehaviorSubject is a great RxJS primitive. It should not automatically become your feature state architecture.

Angular v22.2: Router Resources vs Resolvers — Parallel Data Loading Without the Waterfall 🔥🚀

Let’s be honest: resolvers were never loved, they were tolerated. You wrote one per piece of data, wired it into resolve, and accepted that…

Angular 18: RxJS with Angular

Introduction

Angular 22 Resource API: A Complete Guide to resource(), rxResource() and httpResource()

Working on a web application often involves fetching data from an API, managing state, and ensuring updates happen at the right time.

Building a Reusable Angular Sorting Directive

We already achieved sorting by updating some signal httpResource. All in unison. But making every column sortable has some boilerplate…

`app.ts`

`app.html`

`app.ts`

`app.html`

Using `$event`

Two-Way Binding with `ngModel`

`app.ts`

`app.html`

`app.ts`

`app.html`

`app.css`