Angular Fundamentals

Let's start with the basics: templates, binding and events

Updated to Angular v.19

13 snippets

34 mins

v.19

Fabio Biondi

Google Developer Expert
Microsoft MVP

Learn how to generate Angular projects and create dynamic HTML templates using "interpolation", template binding and native mouse events

Create interactive HTML templates

Binding & DOM elements

Use Mouse & Keyboard events

Change Detection introduction

# 1. Interpolation

SWITCH LAYOUT

Interpolation in Angular is a way to bind data from your component class to your HTML template. It allows you to display dynamic content directly in your view.

The syntax for interpolation is simple: you use double curly braces {{content}} to enclose a template expression.

In your component class, you have the message property:

src/app.component.ts

In your HTML template, you can display this property using interpolation:

src/app.component.ts

When Angular renders the template, it replaces {{ message }} with the value of the property, so the output will be Hello LearnByDo.ing

src/app.component.ts

Add a new property called currentIndex, initialize it to 123 and display the value in the template using interpolation

Click or in the editor to practice

# 2. Dynamic content

SWITCH LAYOUT

this video is in italian

In this example:

In the AppComponent the property currentIndex is a number set to zero initially.
The template attribute of the component holds the HTML to be rendered. It displays the value of currentIndex.
The constructor function is a special function that gets called when an object is created from a class.
In this case, constructor set the value of currentIndex to 10.

src/app.component.ts

# Tip: change your mental model

When transitioning from an imperative approach, like in vanilla JavaScript or jQuery, to a declarative framework like Angular, it's crucial to adjust your mental model to focus on data binding rather than direct DOM manipulation.

In jQuery, developers are accustomed to explicitly updating the DOM using methods like append, remove, or html to manipulate elements directly. This approach involves a step-by-step process where you tell the browser exactly how to change the DOM, which can lead to verbose and hard-to-maintain code.

jQuery

In contrast, Angular, and most of recent front-end frameworks, embraces a declarative paradigm where you define the desired state of the UI and let the framework handle the DOM updates.

Here, you bind your HTML templates to your component's data properties using Angular's powerful data binding mechanisms.

For example, instead of manually appending a new item to a list, you simply update the underlying data array, and Angular takes care of rendering the new item.

The following snippet shows how you can display a list of items using a declarative approach in Angular. Don't worry if you still don't understand how this for block works. We'll talk about it in next chapters

Angular

If you want to add a new element to the list you can simply push a new item to the array and it will be magically updated. That's all :)

Angular

# 3. Mouse Events

SWITCH LAYOUT

this video is in italian

The AppComponent class defines one property currentIndex initialized to zero. This is the value that gets increased and decreased with the respective button clicks.

You can add event listeners to HTML elements by using parentheses (eventName)="callback"

The template attribute within @Component holds the HTML to be rendered and contains 3 elements:

A button, with a click event binding. When clicked, it executes the expression currentIndex = currentIndex - 1, thus decreasing currentIndex by 1.
A span element displaying the current value of currentIndex.
Another button, also with a click event binding. This time, the click increments the value

src/app.component.ts

Increment the currentIndex on mouseover instead of click
Add a new button to reset currentIndex to 0 when clicked

The CSS classes used in this and next snippets are available because we use use Tailwind and Daisy UI. You can learn more about this topic in the Angular Styling chapter.

Quiz

Which is the right syntax to add a listener to an HTML element?

src="..."
(src)="..."
[src]="..."
{src}="..."

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

Angular Fundamentals

Let's start with the basics: templates, binding and events

Updated to Angular v.19

13 snippets

34 mins

v.19

Fabio Biondi

Google Developer Expert
Microsoft MVP

Learn how to generate Angular projects and create dynamic HTML templates using "interpolation", template binding and native mouse events

Create interactive HTML templates

Binding & DOM elements

Use Mouse & Keyboard events

Change Detection introduction

# 1. Interpolation

SWITCH LAYOUT

Interpolation in Angular is a way to bind data from your component class to your HTML template. It allows you to display dynamic content directly in your view.

The syntax for interpolation is simple: you use double curly braces {{content}} to enclose a template expression.

In your component class, you have the message property:

src/app.component.ts

In your HTML template, you can display this property using interpolation:

src/app.component.ts

When Angular renders the template, it replaces {{ message }} with the value of the property, so the output will be Hello LearnByDo.ing

src/app.component.ts

Add a new property called currentIndex, initialize it to 123 and display the value in the template using interpolation

Click or in the editor to practice

# 2. Dynamic content

SWITCH LAYOUT

this video is in italian

In this example:

In the AppComponent the property currentIndex is a number set to zero initially.
The template attribute of the component holds the HTML to be rendered. It displays the value of currentIndex.
The constructor function is a special function that gets called when an object is created from a class.
In this case, constructor set the value of currentIndex to 10.

src/app.component.ts

# Tip: change your mental model

jQuery

In contrast, Angular, and most of recent front-end frameworks, embraces a declarative paradigm where you define the desired state of the UI and let the framework handle the DOM updates.

Here, you bind your HTML templates to your component's data properties using Angular's powerful data binding mechanisms.

For example, instead of manually appending a new item to a list, you simply update the underlying data array, and Angular takes care of rendering the new item.

Angular

If you want to add a new element to the list you can simply push a new item to the array and it will be magically updated. That's all :)

Angular

# 3. Mouse Events

SWITCH LAYOUT

this video is in italian

The AppComponent class defines one property currentIndex initialized to zero. This is the value that gets increased and decreased with the respective button clicks.

You can add event listeners to HTML elements by using parentheses (eventName)="callback"

The template attribute within @Component holds the HTML to be rendered and contains 3 elements:

A button, with a click event binding. When clicked, it executes the expression currentIndex = currentIndex - 1, thus decreasing currentIndex by 1.
A span element displaying the current value of currentIndex.
Another button, also with a click event binding. This time, the click increments the value

src/app.component.ts

Increment the currentIndex on mouseover instead of click
Add a new button to reset currentIndex to 0 when clicked

The CSS classes used in this and next snippets are available because we use use Tailwind and Daisy UI. You can learn more about this topic in the Angular Styling chapter.

Quiz

Which is the right syntax to add a listener to an HTML element?

src="..."
(src)="..."
[src]="..."
{src}="..."

# 4. Component Class methods

# 5. Property Binding e Dynamic Attributes

# 6. Keyboard Events & $event

Unblock the content

It's completely free!

Don’t have an account yet?

Forgot password?

Or did you not receive
the CONFIRMATION email?

# Tip: Change Detection simplified

Angular's change detection mechanism ensures that the views (templates) reflect the current state of the data model. It's a core feature that keeps the UI in sync with the underlying data.

Change Detection Process

State Change Interception: Whenever an event that might change the state (like a button click or data fetching) occurs, Zone.js notifies Angular.

Zone.js allows to intercept asynchronous events like HTTP requests, user interactions, or timers. This allows Angular to know when to run change detection

Triggering Change Detection: Angular starts change detection from the root component and traverses down the component tree. For each component:
- Angular checks if the model has changed.
- If a change is detected, the corresponding part of the DOM is updated.

What about the future

This process is the default mechanism of the framework to render updates but the Angular team is working hard to improve and remove it in future Angular versions.

Angular v.18 already offers a preview of the new API but they are not yet stable. Anyway we'll talk about it in future articles or lessons

Angular Cookbook: The Basics

Send your feedback

Angular Cookbook: The Basics

# 1. Interpolation

# 2. Dynamic content

# Tip: change your mental model

# 3. Mouse Events

Quiz

Send your feedback

# 1. Interpolation

# 2. Dynamic content

# Tip: change your mental model

# 3. Mouse Events

Quiz

# 4. Component Class methods

# 5. Property Binding e Dynamic Attributes

# 6. Keyboard Events & $event

# Tip: Change Detection simplified

Change Detection Process

What about the future