|

Angular Pipes And Data Binding

angular pipes and data binding

In this tutorial, we’ll continue to build our games viewer application and add new features as we go. We’re going to look at how we can use property data binding to set image properties in our component, then use them in the template to display an image for each game. From there we’ll use event binding to allow the user to click a button which will make the image disappear and then reappear. After that we’ll review two-way binding with ngModel and an input element. Finally, we’ll see how Pipes in Angular can be used to transform bound data.


Property Binding To Display an Image

In the component we can use property binding to set an image width, as well as the margin for the image we will display for our games.
game-list.component.ts

Then in the associated template file, those class properties can be accessed using the [attributename]=’attributevalue’ syntax. Note that the src and title attributes are coming from the class properties, while the width and margin are coming from that json data in the games array.
game-list.component.html

Ok we now have images for our games!
angular property binding for css


Event Binding To Respond To Button Click

Recall that event binding is the act of listening for an event to happen in the DOM, and then sending a message to the component code when the event fires. In the component, we can set up a property of showImage and set that to either true or false to display or not display the image. By default it will be displayed, so it is set to true. Additionally, we add the toggleImage() method which simply displays an image if there is none, or removes it if it is present already.

game-list.component.ts

The template will now have a click even registered via (click)=’toggleImage()’, and then a simple ternary operator will change the text inside the button based on if there is an image present or not with {{showImage ? ‘Hide’ : ‘Show’}} Image. A ternary operator is like a short cut for an if statement. The code here says if the image is present, then display “Hide”. If the image is not there, then display “Show”. We use this in combination with the *ngIf structural directive we recently learned about to dynamically add or remove the <img> element from the dom.

game-list.component.html

Here is the result we get.


Two Way Binding

Angular uses a syntax known as a Banana In A Box to signify a two way binding. It is named a Banana In A Box because of this syntax: [()]. We’ll use that syntax to set up two way data binding on the text input which will be used to filter the list of games. At the moment, we do not have filtering set up, but we can see how the two way binding works below. First we need to import the FormsModule in app.module.ts, otherwise there will be errors such as Can’t bind to ngModel since it isn’t a known property input.

app.module.ts

In the component, we add a new class property of listItem. This will be bound to the text input in the template so that when the value changes in the template, the value in the class will also update.
game-list.component.ts

In the template, that property is now bound using [(ngModel)]=”listItem”. In addition, we make good use of that ternary operator again to change whether the text next to the input box shows “Filtered By” or “Not Filtered”.

game-list.component.html

You can see that if there is a filter term in the input, then the text displays “Filtered By”. However, if we remove the filter term to no characters, it now displays as “Not Filtered”.

Angular Currency Pipe

Pipes are a nice feature to make use of in Angular. Pipes provide a means to transform bound data in an Angular template. There are several built-in pipes, and you can also build custom pipes if you like. A pipe takes in a value then returns a value. The most common use is for simple transformations on data. First we’ll look at the built-in currency pipe and use it to format the price of our games. You’ll see the syntax is very simple.

game-list.component.html

angular currency pipe example


Angular lowercase Pipe

Another neat pipe is the lowercase pipe. Below, we’ll add it to make all of the part numbers or game codes of each game become transformed from an uppercase format to a lowercase format.

game-list.component.html

angular lowercase pipe example


Summary

As we added features we worked with the four different types of binding in Angular which are Interpolation, Property Binding, Event Binding, and Two Way Binding. The graphic below shows the direction of each type of binding between the DOM (Template) and the Component (Class).
four types of angular data binding

If there is data in the component class which is not in the format needed for display in the template, then you can make use of Pipes to perform a data transformation. This often makes for a more user-friendly display to the user.

  • The Pipe character | is used to make use of a Pipe
  • The Pipe name is required, such as lowercase
  • Pipe parameters are separated with colons. Look at the currency example above to see this in action
|