Angular and TypeScript basics — Custom Pipes
Tags: angular, typescript, programming
Published: 2018-09-12 19:20:34

---
title: Angular and TypeScript basics — Custom Pipes
published: true
tags: angular,typescript,programming
canonical_url: https://medium.com/@kritner/angular-and-typescript-basics-custom-pipes-eeafe33fec0c
---

![](https://cdn-images-1.medium.com/max/250/0*E_EsQcTWnrmuWHYO.png)

[Last post](https://dev.to/kritner/angular-basics--pipes-180), we added some basic pipe information to my [http://www.kritner.com/solar-projection](http://www.kritner.com/solar-projection) page. I noticed that due to the way my array worked, starting at index 0, 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?

![](https://cdn-images-1.medium.com/max/490/0*UuxvlP3TAzbgR81T.jpg)

So custom pipes, will allow me to write my first function in TypeScript, woohoo! I’ve never been a fan of JavaScript, so TypeScript sounds pretty great considering it (seemingly) C#-ifies JavaScript. More info at [http://www.typescriptlang.org/](http://www.typescriptlang.org/). Note — I say the first function I write, because it really is — the bit of typescript displayed in previous posts was just interface declarations and/or information that was a part of the prebuild dotnet net angular template.

Starting from [https://angular.io/guide/pipes#custom-pipes](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):

```typescript
import { Pipe, PipeTransform } from '[@angular/core](http://twitter.com/angular/core)';
/*
 * Raise the value exponentially
 * Takes an exponent argument that defaults to 1.
 * Usage:
 * value | exponentialStrength:exponent
 * Example:
 * {{ 2 | exponentialStrength:10 }}
 * formats to: 1024
*/
[@Pipe](http://twitter.com/Pipe)({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
 transform(value: number, exponent: string): number {
 let exp = parseFloat(exponent);
 return Math.pow(value, isNaN(exp) ? 1 : exp);
 }
}
```

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:

```typescript
import { Pipe, PipeTransform } from '[@angular/core](http://twitter.com/angular/core)';

[@Pipe](http://twitter.com/Pipe)({name: 'indexOffset'})
export class IndexOffsetPipe implements PipeTransform {
 transform(value: number): number {
 return value + 1;
 }
}
```

Easy peasy! Now to apply it to the table:

```html
<td>{{ projection.purchaseYear }}</td>
```

Becomes:

```html
<td>{{ projection.purchaseYear | indexOffset }}</td>
```

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.

Under app-module.ts I need to make sure to import the file:

```typescript
import { SolarProjectionComponent } from './solar-projection/solar-projection.component';
```

and reference the pipe within the @NgModule declaration:

```typescript
@NgModule({
 declarations: [
 IndexOffsetPipe,
 // etc
 }
})
```

Boom! Now when we view the page we can see:

![](https://cdn-images-1.medium.com/max/430/1*WJqxJ9NmqFedsc--r354lw.png)

Hurray! The year starts with 1 instead of 0!

Related:

- [My first NuGet package! Kritner.SolarEstimate](https://medium.com/@kritner/my-first-nuget-package-kritner-solarestimate-79d7f4abfdc2)
- [Angular Basics — Binding](https://dev.to/kritner/angular-basics--binding-5dn8)
- [Angular Basics — Pipes](https://dev.to/kritner/angular-basics--pipes-180)