Angular ListToString Pipe, that is better than *ngFor

Iterating over an array and printing/rendering its values, are as old as programming itself. Even our young selves, when we knew too little about HTML or javascript, we used “console.log” inside our “for loop” over and over. It is almost unimaginable to have a serious application without rendering some array content.

Said that It is a must to have feature for every web framework available in the world. All the web frameworks (Angular, React, Vue) they all implement it.

Angular has the ngFor directive, for that. Whenever we want to render some array content inside our view, we write the following code:

<div *ngFor='let user of users'> {{user.name}} </div>

It is a pretty neat and simple solution.

Needless to say that, sometimes writing even this level of code becomes annoying. If we want, to print an item property, we have to write at least a skeleton still. So because I’m lazy and I think many developers are, I came with an idea, to create a pipe that will render our array, without any extra HTML.

For example, if I have a user, and I want to render the languages, that the user speaks, I could write

What if my language is an object and not a string?. sure no problem:

What if I want to print not only the name but shortName also? “suuuure no problem”

and at last, are y ready? What if I want to have different separators between properties and an item? I think you know the answer “ Suuuuuuuure no problem”

what about rendering some HTML along with properties? Go and use *ngFor , please :)

Implementing the pipe

implementing our pipe is very straightforward. We only need to use map and join operators over an array. Here’s how it looks like, I’ll explain everything below

At first, we check if it is an array, if not we just throw an Exception, it helps a lot during the development process ( you can mock it in production, just adding environment.production check or checking isDevMode()). After that, we take two separators, one for an item English,German and one for a property separator English KA,German GE , as you can see if it is not specified it takes some default values (We could add default values from token also, which would be more elegant, than initializing it inside the pipe but I’ll keep it simple ). Next comes a bit interesting part, which gives us our magic string, we do the following:

  • we Iterate over each element inside the array
  • we call theresolveProperties method, on each item, and depending on the passed property name itself we do the following
  • if the propertyName is not specified we know, that it is just a string so we return it
  • if the propertyName is an array, we know that we need to join multiple properties so we do it using join operator
  • if it’s just a string we just grab the property and return it
  • at last, we check that every field is not null or undefined, because we don't want to print some weird null or undefined words, and join them together with a separator

Summary

Perhaps you will think that this pipe is not much better than *ngFor pipe, and you will be probably right. If you like to write the same separators or the same code every time, it’s fine, because It doesn't mean that you are repeating yourself.

But in my situation when I created this pipe and had a case to use it, I felt some pleasure inside myself, that writing only listToString:['firstName','lastName'] would take all the items, join individual properties together, check on null values and give me a string, which I should just render:). Good Luck!

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