In this article we will discuss Data binding in Angular. If you miss our previous article please go through the link Styling Angular Components. In this article we will cover below points;
- What is Data Binding ?
- Why do we need Data Binding ?
- What is Data Binding in Angular ?
- Types of Data Binding.
What is Data Binding ?
Data binding is one of the most important features provided by Angular Framework which allows communicating between the component and its view.
Why do we need Data Binding ?
When we develop a application we mostly focus two things, Data and the UI (User Interface) and it is more important to find an efficient way to bind them (Data and UI) together.
Now a day most of the front-end development uses JavaScript frameworks like Angular which does a lot of work for us. These Frameworks takes the responsibility of synchronizing the data and the user interface. The angular framework provides one concept called Data Binding which is used for synchronizing the data and the user interface (called a view).
What is Data Binding in Angular Application ?
In Angular, Data Binding means to bind the data (Component’s filed) with the View (HTML Content). That is whenever you want to display dynamic data on a view (HTML) from the component then you need to use the concept Data binding.
Data Binding is a process that creates a connection to communicate and synchronize between the user interface and the data. In order words, we can say that Data Binding means to interact with the data and view. So, the interaction between the templates (View) and the business logic is called data binding.
Types of Data Binding in Angular
There are two types of Data binding available.
One-way Data Binding- where a change in the state affects the view (i.e. From Component to View Template) or change in the view affects the state (From View Template to Component).
Two-way Data Binding- where a change from the view can also change the model and similarly change in the model can also change in the view (From Component to View Template and also From View template to Component).
The below image describes the classification of Data Binding.
Examples of Angular Data Bindings
- Interpolation
- Property Binding
- Attribute Binding
- Class Binding
- Style Binding
- Event Binding
- Two-way binding
We will discuss one by one data bindings method in our upcoming articles.
In this tutorial we discussed Angular Data Binding. If have any question related to this topic then give your feedback.
Post a Comment