An intro to the Angular framework. Key concepts explained.

a simple initial component.

Hey Everyone, how’re doing?

I want to write this article to explain some core concepts of the Angular framework. Let’s start?

First important question: What is a framework?

A straightforward definition for it would be a tool. A framework is a tool that will help you build your application since it provides ready-made solutions for you to use that will speed up development and it serves as a foundation for your project, so you’re not starting entirely from scratch.

As mentioned above, frameworks allows developers to speed up development and in any language you will find frameworks to help you with your development tasks. In front-end development it isn’t different. We have at least three major front-end frameworks that are very popular in web development which are: Angular, React and Vue.js.

So, which one should you use?

It depends, hahah

All of the three frameworks have the main goal of helping developers manage large web applications which uses a lot of JavaScript. As I said earlier, frameworks are tools and each tool will work better for a specific scenario. Every framework will have pros and cons and it’s up to you to analyze and decide which one will work best for your project/problem.

OK, you researched all of three frameworks and you decided to pick Angular for your project. Awesome!! Now, what are the keys concepts that you need to understand about this tool?

1. Expressions and Interpolation

This is a powerful feature heavily used in Angular components. First, let’s try to define expressions:

An expression is a single line of code that evaluates to a value. The value may be a number, string or a logical value.

Here are some examples of expressions in JavaScript and other examples that aren’t expressions.

So, how Angular handles expressions? It will first, look for expressions, then it will run it and finally it’ll replace curly brackets “{{ }}” with the value from the expression.

What about Interpolation? Often, these two words (expressions and Interpolation) can have interchangeable meaning. However, there is a difference between them.

Expressions are the code inside the curly brackets.

String Interpolation is the process of replacing placeholders into string values.

2. Data Binding

All three frameworks that I mentioned above are component based, in other words, they use components to render user interfaces and the component’s logic contains all the data needed to render that view (UI). The connection between the component’s logic and the data that it displays is called data-binding.

In this topic, there is a major difference between Angular and React. Angular implements the concept of two-way data-binding whereas Reacts uses the one-way concept. And, what does that means?

one-way and two-way data binding examples. retrieved from https://dzone.com/articles/explaining-data-binding-and-server-rendering-in-an-2

One-way data binding: the data can flow only in one direction.

Any change in the component’s logic (model) will be reflected inside the view (UI).

OR

Any change in the view (UI template) will be reflected inside the component’s logic (model).

Two-way data binding: the data can flow in and from both directions.

Any change in the component’s logic will be reflected inside the view.

AND

Any change in the view will be reflected inside the component’s logic.

Since Angular uses the two-way data binding it has an awesome feature called “change detection system” which will watch properties for change and when it detects some change it will synchronize automatically the data between a component and its view.

3. Property Binding

So, during the change detection phase Angular will process the templates (views) and if it sees a property surrounded with square brackets “[]” it will process the attribute before rendering the template. Using the “[]” we can bind property of the DOM element to the component’s variable.

example of property binding.

In the example above we can see the use of the property binding syntax. I created a variable in the component called “imgUrl” which hosts the URL of this beautiful dog on the right side of the pic hahaha. This variable is attached to the template using the property binding syntax “[]”.

template: <img [src]="imgUrl">

When we surrounded the src attribute with the square brackets we are telling Angular to treat the value of the attribute as an expression. So the value of this attribute is no longer static and will be interpreted as an expression.

4. Event Binding

Event binding allows you to listen for and responds to user actions such as keystrokes, mouse movements, clicks and touches. Angular provides an easy way to attach event listeners on elements. We just need to surround the event name with parenthesis “()” on the HTML element.

a simple example of usage of event binding syntax.

In this example I created a simple HTML button and attached to it a listener for clicks using the “(click)” syntax. On each click in the button, the function “counterClicks()” will be executed.

In conclusion, above you’ll find 4 key concepts of the Angular framework explained with straightforward examples. I hope this article helps you to have a better understanding of this cool framework. Nice coding!!