The TRUE difference between [] and {{}} bindings in Angular

By Known-Space -

 One of the parts of Angular that most developers think they understand, but many don’t, is the true nature of [] and {{}} bindings.

A fundamental lack of understanding of these bindings can become a major issue when working with templates and trying to get them to do exactly what you want. It can also be the cause of spending an unnecessary amount of hours trying to figure out a bug.

So I’m going to run down exactly what these two bindings do, and what it is that many developers misunderstand about them.

You’re probably familiar with the typical usage of {{}} bindings:

<h1>{{title}}</h1>

And you’re probably familiar with the typical usage of [] or property bindings:

<img [src]="imgsrc">

But do you truly understand what each binding is doing? And why we use them in this situation? Many if not most developers simply know to use {{}} when putting text in an element, and [] for binding to properties.

But have you ever wondered with reactive forms why the formControlName property doesn’t use the [] binding?

<input formControlName="title" >

A foundational understanding of what is going on will help you understand when and why you need to use [] or {{}} or nothing (like with the formControlName property)

So let’s start by discussing the difference between the following two lines:

<img [src]="imgsrc">
<img src="{{imgsrc}}">

Both will accomplish the same thing. They both set the src attribute of the image tag.

It’s also important to understand that both of them are running an evaluation on the imgsrc property which must be in your component. In both, they are using Angular’s expression syntax. So you can do things like the following:

<img [src]="'/images/' + name + '.png'">
<img src="{{'/images/' + name + '.png'}}">

This is an expression that does string appending to ultimately arrive at the URL for the image, appending together a root directory, a name, and an extension.

Note that you can’t mix [] and {{}} together on the same attribute. Angular will complain.

So what’s the ultimate difference between the two?

It comes down to how they function. {{}} is basically a form of string interpolation. You should think of it as simply replacing the HTML string with the results of the binding, and then the HTML gets evaluated.

Property binding, [], on the other hand, works differently. You should think of this as manipulating the DOM after the HTML has been processed by the browser.

So the [src] binding actually manipulates the src property of the image object, and NOT the src attribute of the img tag.

The reason this matters is that the property binding - since it’s not string interpolation - can preserve data types.

Consider the following part of a form:

<input formControlName="isVisible" name="isVisible" type="radio" value="true"> True
<input formControlName="isVisible" name="isVisible" type="radio" value="false"> False

This HTML doesn’t bind the isVisible part of the form to the boolean values true and false. If you thought it does you have fallen victim to the subtle issues with binding. This code binds the isVisible property to either the string “true” or the string “false”. And any non-empty string is truthy. So if you then used that in a ngIf expression

<h1 *ngIf="myForm.value.isVisible">I'm only visible if the radio button is set to True</h1>

This won’t work. The ngIf will always evaluate to true.

BUT if you bind to the value PROPERTY

<input formControlName="isVisible" name="isVisible" type="radio" [value]="true"> True
<input formControlName="isVisible" name="isVisible" type="radio" [value]="false"> False

Then you are now binding the isVisible property to a boolean true or false.

But you can’t do this with the {{}} binding

<input formControlName="isVisible" name="isVisible" type="radio" value="{{true}}"> True
<input formControlName="isVisible" name="isVisible" type="radio" value="{{false}}"> False

This produces the same result as the first example. It’s ultimately just the string “true” and the string “false”.

That is the fundamental thing that most Angular developers don’t understand. Property bindings are actually manipulating the DOM and they get to preserve data types. Curly brace binding is string interpolation of the HTML and always results in strings.

Once you understand this, you can avoid a lot of potential bugs.

Comments

Post a Comment

Popular posts from this blog

Nginx

By Known-Space -
Image
What is a Web Server? A web server is software and hardware that uses  HTTP  (Hypertext Transfer Protocol) and other protocols to respond to  client  requests made over the World Wide Web. The main job of a web server is to display website content through storing, processing, and delivering webpages to users. Besides HTTP, web servers also support  SMTP  (Simple Mail Transfer Protocol) and FTP (File Transfer Protocol), used for email, file transfer, and storage. Web servers are  used in web hosting  or the hosting of data for websites and web-based applications -- or web applications. How do web servers work? Web server software is accessed through the domain names of websites and ensures the delivery of the site's content to the requesting user. The software side is also comprised of several components, with at least an HTTP server. The HTTP server is able to understand HTTP and URLs. As hardware, a web server is a computer that stores web server software and other files related t
Read more

AWS Configuration For RDS(postgres),ElastiCache(Redis) with ElasticBean

By Known-Space -
AWS Configuration For RDS(postgres),ElastiCache(Redis) with ElasticBean RDS Database Creation Go to AWS Management Console and use Find Services to search for RDS Click Create database button Select PostgreSQL Check 'only enable options eligible for RDS Free Usage Tier' and click Next button Scroll down to Settings Form Set DB Instance identifier to multi-docker-postgres Set Master Username to postgres Set Master Password to postgres and confirm Click Next button Make sure VPC is set to Default VPC Scroll down to Database Options Set Database Name to fibvalues Scroll down and click Create Database button ElastiCache Redis Creation Go to AWS Management Console and use Find Services to search for ElastiCache Click Redis in sidebar Click the Create button Make sure Redis is set as Cluster Engine In Redis Settings form, set Name to multi-docker-redis Change Node type to 'cache.t2.micro' Change Number of re
Read more

Use @Initbinder in Spring MVC

By Known-Space -
Image
In this blog we will learn how to use @initbinder Annotation in Spring MVC. We will walk through a small example with help of a demo application. If you’re familiar with MVC architecture ,you must all be aware that controller is used for processing the web request and rendering the response to the View. Now,Initbinder comes into picture if you want to customize the request being sent to the controller.It is defined in the controller, helps in controlling and formatting each and every request that comes to it. This annotation is used with the methods which initializes  WebDataBinder  and works as a preprocessor for each request coming to the controller. InitBinder interaction with other Components Seems lot of gyaan right ! So,now to explain this let’s take an example. Consider we have student management portal for a school ,which manages the information of all the students present in the school.It has a feature for registering a student when he is admitted to the school. So the form lo
Read more

How to read Dates with Hibernate

By Known-Space -
Handling Dates with Hibernate You can make use of a combination of Java's date formatting class and Hibernate annotations. Sample output: Student [id=50, firstName=Paul, lastName=Doe, email=paul@luv2code.com, dateOfBirth=null] Student [id=51, firstName=Daffy, lastName=Duck, email=daffy@luv2code.com, dateOfBirth=null] Student [id=52, firstName=Paul, lastName=Doe, email=paul@luv.com, dateOfBirth=31/12/1998] Development Process Overview 1. Alter database table for student 2. Add a date utils class for parsing and formatting dates 3. Add date field to Student class 4. Add toString method to Student class 5. Update CreateStudentDemo ---- Detailed steps 1. Alter database table for student We need to alter the database table to add a new column for "date_of_birth". Run the following SQL in your MySQL Workbench tool. ALTER TABLE `hb_student_tracker` . `student` ADD COLUMN `date_of_birth` DATETIME NULL AFTER `last_name` ; -- 2.
Read more

CSRF Protection using Synchronizer Tokens

By Known-Space -
Image
What is cross site request forgery? Cross-Site Request Forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they're currently  authenticated. CSRF attacks specifically target state-changing requests,  not theft of data, since the attacker has no way to see the response to the forged request We can avoid these kind of attack (CSRF) by two ways 1. Synchronizer Tokens 2. Double submitted cookies Here we are considering on Synchronize Tokens. When we login, there will be a random number generated and stored on the client side and server side as well. So when the attacker creates the code he doesn't know the token value. So he can not create a code with the correct token value. Anyhow, if the victim clicks the link, that won't be harmful. because the verification will fail. For the first step we want to create the session in the client side (index.php). Then we want create a cookies and set session id to the cook
Read more

CSRF Protection using Double Submitted Cookies

By Known-Space -
Image
Here we will look about the Double Submitted Cookies to CSRF protection. In Synchronizer Token the client and the server should wants to generate the token value. So this process is time consuming and get load the server. For reduce this kind of issues we are using double submitted cookies. We need java script to run double submitted cookies. For that the http flag should be off. Here we are sending two cookies through the http header and the http body. Then the server will validate these two cookies and if its same it will allow, if its not deny the request. In the client side (index.php) we create the session and store it in the cookie.After that create a token and store it in a new cookie. After that we shoud set the estimation of hidden token as "<? echo $token ?>" This will send the hidden token to server side when client click on login button. After that create a function to validate login in the server side Get the full code from here
Read more

Add Logging Messages in Spring 5.1 - All Java Config Version

By Known-Space -
Image
Add Logging Messages in Spring 5.1 - All Java Config Version The Problem In Spring 5.1, the Spring Development team changed the logging levels internally. As a result, by default you will no longer see the red logging messages at the INFO level. This is different than in the videos. The Solution If you would like to configure your app to show similar logging messages as in the video, you can make the following updates. Note, you will not see the EXACT same messages, since the Spring team periodically changes the text of the internal logging messages. However, this should give you some additional logging data. Overview of the steps 0. Create a logging properties file 1. Create a configuration class to configure the parent logger and console handler Detailed Steps 0. Create a logging properties file This properties file will define the logging levels for the application. The props file sets the logger level to FINE. For more detailed logging info, you can s
Read more

Hibernate and Primary Keys

By Known-Space -
Image
Hibernate and Primary Keys Primary Key :  Uniquely identifies each row in a table  Must be a unique value Cannot contain NULL values MySQL - Auto Increment Hibernate Identity - Primary Key ID Generation Strategies You can define your own CUSTOM generation strategy :-) Create implementation of org.hibernate.id.IdentifierGenerator Override the method: public Serializable generate(…)
Read more