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.
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 image tag is set to a property defined here in the component:
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.
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.
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:
And we can add this function to the TypeScript component:
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:
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:
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:
