Skip to main content

Binding in Angular

Data-binding means communication between the TypeScript code and template. Using Data Binding, the user can able to manipulate the elements. Therefore, whenever some variable has been changed, that particular change must be reflected in the Document Object Model


Data-binding can be either one-way or two-way. Angular provides various types of data binding -

1.String Interpolation

2.Property Binding

3.Event Binding

4.Two-way binding


String Interpolation

String Interpolation is a one-way data-binding which is used to output the data from a TypeScript code to HTML template (view). It uses the template expression in double curly braces{{}} to display the data from the component to the view.

app.component.ts

app.component.html

<h3><title name: {{title}}</h3>

in the above example, the output will be 
title name: String  Interpolation Data Binding


Property Binding

Property binding is also a one-way data binding, where we bind a property of a DOM element to a field which is a property we define in our component typescript code. Behind the scene, Angular converts string interpolation into property binding.

For Example – <img [src]=”imgUrl” />

However, we can use string interpolation here like <img src=”{{ imgUrl }}” /> , but property binding is always a lot cleaner and shorter syntax to bind image source.


Event Binding

Angular provides us with other types of binding, i.e., event binding, which is used to handle the events raised from the DOM like button click, mouse move etc. Let’s understand this with the help of an example –

Suppose we have a button in the HTML template and we want to handle the click event of this button. To implement event binding, we will bind click event of a button with a method of the component.

app.component.ts


When a user clicks on this button, the button click event will fire and the onClick method will be called, which will log a message in the console.


Two-Way Data Binding

Angular provides a very nice feature; i.e., two-way data binding. As of now, we have seen how to bind component data to view using one-way bindings. That means any change in the template(view) will not be reflected in the component typescript code.



Now, two-way binding has a feature to update data from component to view and vice-versa.

Syntax - For two-way data binding, we combine property binding and event binding both.

<input [(ngModel)]="username">

<p>Hello {{username}}!</p>

Comments

Post a Comment

Popular

JavaScript type hoisting with variable function Expression

JavaScript type hoisting with variable function Expression Hoisting is JavaScript default behavior to moving declaration on the top. Variable can be used before its declaration. To understand this, first we need to understand of hoist meaning, hoist means “raise(something) by means of ropes & pulleys”. now we can relate hoisting with JavaScript. JavaScript interpreter moves all declaration on the top at runtime. It is best practice to declare all variable at the top of their respective scopes. , JavaScript is loosely syntax language so it will not throw any error at runtime if the variable used before its declaration. But JavaScript does not allow variable used before its declaration in “use strict” mode. Example 1 In this example, we can see in a normal scenario, when y has declared & then used. in this case, it will give output 10 as excepted. <p id= "demo" ></p> <script> var y; //Declare y y = 10 ; ...
4 comments
Read more

JavaScript Closure

What is closure? It is my personal experience, I have never understood closure, I have read many articles & have seen many videos. Finally, I understood sometimes we even used a closure without realizing we were using a closure. First, understand the meaning of closure “an act or process of closing something”, now we can relate closure in javascript, closure is an inner function which wraps inside the outer function, which can access outer function scope & global function scope. for scoping you can read my previous blog:- http://uisource.blogspot.com/2018/08/javascript-variable-scoping.html why do we create? Global variables can be made local (private) with closures. To avoid the usage of global variables, use the local variables and wrap your code in the closure. A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain(Lexical scoping). The closure has three scope chains: it has access to its own scope (variables define...
1 comment
Read more

JavaScript Variable Scoping

There are two types of variables in JavaScript.  Global variables have global access and are declared outside of any function. Local variables are those declared inside of function. Lexical Scoping(Nested JavaScript Function) means that in a nested group of functions, the inner functions have access to the variables and other resources of their parent scope. Global variable:- Global variable declares & initialize outside the function, & accessible in from anywhere in the code. The global variable always stored in memory even function execution finish, it always keeps in memory or always accessible from anywhere in the code. Example 1 var message= "hello i am global variable" ; //global variable function a (){ console.log(message); // output: hello i am global variable } function b (){ console.log(message); // output: hello i am global variable } function a() function b() In above example message is a global variab...
1 comment
Read more