Showing posts with label Data Binding. Show all posts
Showing posts with label Data Binding. Show all posts

Sunday, October 21, 2018

Interpolation in Angular

Interpolation is the simplest form of data binding in Angular, Interpolation is one-way data binding from the Component class to the view template. Interpolation is implemented using a double set of curly braces enclosing a property which is defined in the component.

{{property}}

At runtime Angular gets the value of the property from the component and displays it in the view.  Interpolation can be used to display text/messages in the view. Interpolation comes in handy when we need to append components property values with other text in the view.

Let us understand Interpolation with a very simple example, we will set a property title in the component and display it in the View using interpolation.

Friday, October 19, 2018

Types of Binding in Angular

Binding is used to bind the model properties and controller functions to the View. Let us now see the different types of bindings offered by Angular.

Angular provides 4 different types of binding.

1. Interpolations
2. Property Binding
3. Event Binding
4. Two way binding

What is Biding in Angular?

Binding is the concept by which the properties and functions in the model/controller are bound to the View. Remember that Angular is a client side MVC architecture.

In AngularJS the $scope was the model which contains the model properties and the controller had the function. Views are HTML files or other files like the MVC view files (.cshtml). Both the model properties and the controller functions are bound to the view using Binding.

In Angular the Component class contains the model properties and functions and the template .html files represent the View. The model properties and functions are bound to the view template file using Binding.