Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Angular 3
  • Overview
  • Transcript

2.6 The Pair Pipe

Right now, our project summaries are being displayed vertically here. We have one on top of the other. But I'd like to change it, so that they are displayed in rows of two. So we'll have the first two and then a row, the second two, etc., etc. And so I think the easiest way to render this would be to change our array of projects when we're rendering them. To an array which has nested arrays and each of those nested arrays is a pair of projects. I hope that doesn't sound too confusing, but I think you'll see what I have in mind if we look at the projects template. Now you'll remember that the projects template is where we display our list of projects. This is the component that will be displayed when we go to the /projects route. So what we want to do instead here is have a div and here, let's do *ngfor. And we're going to say let projPair of projects and inside of this, instead of looping over projects, we'll just loop over the project pair. And so we have pairs of projects and then we show those pairs each in a project summary. Now of course, the problem with this is that projects here is not currently an array of pairs, it's an array of projects. So what we need to do is convert this projects array into the data format that we need. While Angular has a construct called pipes and a pipe is something we can use to convert data from one format to another. You'll see this often used to convert numbers or currency or dates. But in our case, we can use it to convert our array of projects into an array of arrays of projects. You can use a pipe by simply using the pipe symbol and then writing the pipe name after it. So in our case, we're gonna call this pair because we wanna use it to convert our projects into sets of pairs. Let's see how we can build this pair. So inside of the app folder, we will create a file called pair.pipe.ts and in here we're going to import the pipe decorator and the pipe transform interface and these both come from Angular core. And let's call the pipe decorator and the pipe decorator just takes a name, and of course this name is the name we will use when we call the pipe. We've already decided that here, we want to call it pair. So we'll say the name is pair. And then we have our class underneath it and this will be PairPipe and this PairPipe implements the PipeTransform interface. When we want to have a transforming pipe, we need to implement a transform method. This transform method will take some value and in our case, we expect that to be an array of anything. And what's going to be returned is another array of anything. And so now what we need to do is take this value and convert it to an array of pairs. So first of all, if there is no value, then let's just go ahead and return null. So with that guard clause in place, we can create an array here. So we'll create a blank array and we will also create an index value that starts at zero. So now let's start looping over our array here. Let's say while we still have a value of the index i inside a value, then in here what we can do is create an item array. Which will just be a blank array for starters and then we can say item.push value i, so we'll push the first value into i and after that we will increment i. Now it's possible that we have an odd number of items in this value array. So that means we're going to have to do another check here. We can say if there is a value with the next index, then we'll go ahead and push that one into item.push value i, increment i afterwards and there we go. And then at the very end of this array, after we have put one or possibly two items into the item array. We'll push that sub array into this parent array that we've created up here. So we'll continue to loop until we run out of items inside the value array. And then at the very end of this we can go ahead and return that array, in that way all of our values will be paired up. All right, now there's a little business to take care of in the module file as you know. So in module, let's go ahead and we will import the PipePair from pair.pipe. And down here in our decorations, let's include the PairPipe, that should be everything we need to display our projects in rows of two. So let's come back to the browser here and we have an error PairPipe is not defined. Sorry, when I imported it I said PipePair, so we will say PairPipe. And now if we come back to the browser and let it refresh, we can see that this is being displayed nicely. We have our pair of two showing at the top and then we have just one on the second row. But now our projects are showing nicely as cards. So this is the end of our projects list page. Now that we have this in place, we're going to step away from projects for a second and talk about users and how they might log in and out of our system.

Back to the top