CodeX
Published in

CodeX

Data Binding in Angular

Data binding in Angular is a way to keep your views consistent with the state of your application. You can bind properties and events in your template to your TypeScript component to do things like update the view when you input data, click a button, or trigger any other event. In the below example, data binding is being used to allow the TypeScript component to keep track of the input text, and display it in the view in real time.

An example of data binding

In Angular there are many ways to bind data, but we will be focusing on Property binding, Class binding, Event binding, and Two-way binding. In this blog, we will review a series of examples to demonstrate the ways we can use data binding. You can navigate to the GitHub repository to see the full code here.

Property Binding

You can set values for directives of HTML elements with properties of your TypeScript component with property binding. Using properties allows you to have dynamic values that can be conditionally changed in your component. Property binding can be done with an element property, component property, or directive property. Here is an example of Element property binding.

The src attribute of the img tag is bound the the component’s ‘puppyImagePath’ property

The src attribute of the image tag is set to a property defined here in the component:

the image here uses a local path to the ‘assets’ folder

In addition to the src attribute, you can see we use style bindings to define the images width and height in pixels. The main advantage to setting these attributes to properties of a component is the ability to manipulate the values at will.

Class Binding

We can modify class names for html elements with Class binding. The most basic example of this is to bind a single CSS class to an element using [‘class.className’] and assign it to a boolean to determine whether the class should be applied or not. For example, we could add the following code to bind a ‘isRed’ class to the text.

note the [class.className] syntax

The class will be considered ‘isRed’ when the boolean ‘labelIsRed’ is true in the component. By adding a CSS rule to set the text to red and a toggle in the component to change the value of ‘isRed’ to toggle true and false, we can create the following effect.

The toggle method is bound to the Click event on the Change Color button

You can also bind multiple classes to an element by binding a string of class names, an object with class name keys and boolean expressions as values, or an array of class names. Here is an example of each method to bind multiple classes:

And in the template, use any of these properties as your class like this:

Event Binding

Event binding allows your component to react to user actions such as button clicks, keystrokes, or any other event. We can add the our previous component a function to toggle the height and width properties, and add it to a button click in the template. By using the (click)=”myFunction” syntax, Angular will bind the click of the button to the function we bind it to. The code would look like this in the template:

The (click) event is bound to the component

And we can add this function to the TypeScript component:

Define this function to call when the button is clicked

The (click) in this example is the target event, or template event name, and the ‘toggleImageSize()’ function call is the template statement. Click will likely be the most commonly used event you will need to bind, but this event binding works for any form of event, even Custom events.

Two-Way Binding

Two-way binding in Angular provides a way to share data between components to listen to events and update values. We can use an EventEmitter to execute a custom event in a component and emit the event up to the parent component. First the directive creates an EventEmitter exposed to a property, then it calls the ‘emit(exampleData)’ function passing it some type of data, and the parent directives listen for the $event object.

To visualize this, we can see an example of deleting a single item that is an instance of a component via the parent of this component. Let’s say we have a list of to do item, each one represented by a child component. They are rendered in the parent component, and passed the string that represents each thing to do. They are also passed a function that allows the item to be deleted. However, the to do item itself does not do the deleting, it rather emits the event of ‘delete’ back up to the parent component, where the logic is executed.

The parent HTML component template will look like this:

notice the [todoItem] is how each item is passed to each instance of the child component

The child TS component will call a function on a button click, and emit the event. This will emit back up to the parent component, which will execute the logic to delete the to do item. Here is the child TS component:

@Input() allows the component to take input from its parent

In Use

The easiest way to get used to theses concepts is to practice them in your applications. Consider building a new application, or rebuilding an existing one using Angular and using data binding to manage the state of your components. You can refer to the resources linked below, as well as the GitHub repo with these components in it. Please feel free to leave a comment with any questions or concerns. Happy coding!

Resources:

https://github.com/AidanMcB/data-binding-blog

Everything connected with Tech & Code. Follow to join our 900K+ monthly readers

Recommended from Medium

Boost your CSS animations with Intersection Observer API

Declarative Storybook configuration

Creating a full-stack web application

Replacing state= & this.setState with the useState & useEffect hooks in React

Leetcode Q188. Best Time to Buy and Sell Stock IV (Q180)

Spooky p5.js Interactions

Leetcode Q160. Intersection of Two Linked Lists (Q156)

Adding New Relic to a Heroku NodeJs project

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
Aidan McBride

Aidan McBride

I ‘m a Web Developer and a Flatiron coding bootcamp alumni. I currently work in the financial tech industry as a Front End Engineer

More from Medium

RxJS in Plain English

How to Turn an Array of Observable Into an Observable of Array in Angular

The Two Concepts That Finally Helped Me Understand Observables