Last post, we added some basic pipe information to the solar projection page. I noticed that due to the way my array worked, the data in the table shows the first year as “year 0”… Yes, I could change several places in the code to start with index 1, update the calls to the compounding interest to use index — 1, etc, but that seems like a PITA. Surely we could just do a custom pipe to apply to the year column of our table, that returns the original number +1, right?
Starting from https://angular.io/guide/pipes#custom-pipes as a base, I can see the custom pipe needs to implement a
PipeTransform The complete example is (as of writing):
Seems simple enough, let’s adapt the above code to get our pipe — a pipe that simply takes in a number, and outputs a number +1 over the input number:
Easy peasy! Now to apply it to the table:
Let’s try it ou — RUNTIME ERROR. Oh noes, what doesn’t it work? Oh, apparently this pipe needs to be registered in my components, that should be an easy fix.
app-module.ts I need to make sure to import the file:
and reference the pipe within the
Boom! Now when we view the page we can see:
Hurray! The year starts with 1 instead of 0!