Sharing Top Content from the Angular-sphere.

Refactoring to Angular Pipes

  • This post explores how encapsulating this mapping logic in its own UI-based wrapper, a pipe, reduces component complexity in two ways.
  • When mapping in the component, each component is responsible for mapping this date into the correct string format and the component is responsible for two pieces of state, the original value and the display value (or multiple display values).
  • When this logic is encapsulated in a pipe, the view declaratively defines how the data should display and the component is only responsible for one piece of state, the date object.
  • In the initial component implementation, the pipe formats the date and replaces the day of the week text when the day is either today or yesterday.
  • In this example, you saw how to refactor a component’s mapping logic to a re-usable pipe.

Angular pipes are often overlooked in their simplicity. They convert a set of inputs to display text and help reduce the amount of code in your components.

@russfrith: Refactoring to Angular Pipes via @amarisi #angularjs #angular4

Derived from photo by Bodey Marcoccia / flickr.com, CC BY-SA

Angular pipes are often overlooked in their simplicity. If you are familiar with filters in Angular 1.x, they are conceptually similar. At their core, they convert a set of inputs to display text in the UI. And while there are other ways to accomplish this, you may find that by using pipes you can reduce the amount of code in your components.

comment to convert mapping logic into a pipe. This post shows how to create the pipe:

Admittedly, I’m a little torn on using pipes. In their pure form, the concept is straightforward: take a set of inputs and return the display output as a string. A pure JavaScript function can also accomplish the same result in a component. I sometimes view pipes as conceptual overhead that you don’t necessarily need to learn when starting with Angular. The concept count is already so high for many developers. Why add pipes to the mix?

This post explores how encapsulating this mapping logic in its own UI-based wrapper, a pipe, reduces component complexity in two ways. First when mapping in the component, you are responsible for determining if a value has changed or not before mapping (or you decide not to check this at all). When using a pipe, Angular’s change detection evaluates the value to determine if mapping is required.

Second, using a pipe can reduce model complexity. For instance, this example formats a date in a custom way. This date may be rendered in different ways depending on where it is shown. When mapping in the component, each component is responsible for mapping this date into the correct string format and the component is responsible for two pieces of state, the original value and the display value (or multiple display values). When this logic is encapsulated in a pipe, the view declaratively defines how the data should display and the component is only responsible for one piece of state, the date object.

Initially, I recommend sticking with pure pipes. They are more performant out of the box because they adhere to the default (and fast) Angular change detection behavior where only values and object references are compared. If you find the need to detect changes at a deeper level of an object, there are probably better ways to handle this outside the scope of a pipe – and this article.

This post isn’t attempting to recreate the documentation, please read that here. Rather, this is more of a case study.

In the initial component implementation, the pipe formats the date and replaces the day of the week text when the day is either today or yesterday. This is how the component class is written with the formatting logic in the component:

This is the pipe and the component after refactoring:

with one date property.

To view the full repository, check out the branch for this post in the Bebop Routines project on GitHub.

In this example, you saw how to refactor a component’s mapping logic to a re-usable pipe. This helps the component’s maintainability by reducing both logic and state. Also, the pipe leverages Angular change detection to ensure the mapping logic is only executed when necessary.

Are you using pipes today? How have you found them to be the most useful? Let me know your thoughts and questions in the comments.

Refactoring to Angular Pipes

Comments are closed, but trackbacks and pingbacks are open.