Two Way Data Binding In Angular 12

In this article, we will see how two-way data binding in angular 12. When you create a variable or property to data, it is called data binding in angular. Two-way binding gives components in your application a way to share data. Use two-way binding to listen for events and update values simultaneously between parent and child components.

So, let’s see angular two-way binding, one-way binding and two-way binding in angular 11/12/13, one-way data binding in angular, ngmodel two-way binding, angularjs two way binding example

There are two types of data binding.

  • Property binding
  • Event binding

Angular’s two-way binding syntax is a combination of square brackets and parentheses, [()]. The [()] syntax combines the brackets of property binding, [] with the parentheses of event binding, ().

When you set values for property to HTML elements or directives, it is called property binding. Property binding is used to work in HTML, like input value, dynamic CSS, or Javascript.

Example: Property Binding

app.component.ts you define.

And you bind its value in HTML app.component.html as follows.

Event binding allows you to listen for events like click, mouse hover, etc. It works the same as Javascript events.

Example: Event Binding

You can define events in the HTML view app.component.html

In two-way binding, A component shares property data to the HTML view and the HTML event sends data to the component. The two-way binding combines both property binding and event binding.

Example:

In this example. we will bind the text box with the property. When the user changes the textbox value, it will send data to the component and it will update the HTML view.

src/app/app.component.ts

In HTML view, add textbox which binds username property. On changing its value, ngModel will update its value which changes its value in the h1 tag.

As we are using form elements, we need to import FormsModule in app.module.ts

If you want to give style to form, you can add CSS to app.component.css

Output:

Now, we will run the server.

Open the URL on the browser and try http://localhost:4200

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Websolutionstuff

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API. Visit Website: http://websolutionstuff.com/