5 Rappen CHF rounding (Rounding to nearest 5 cents) + Swiss Franc + Angular Pipe

Balram Chavan
2 min readDec 12, 2022

How would you implement conversation logic for below requirements?

For example,

  • Values between CHF 0,975 and CHF 1,024 will be rounded to CHF 1,00
  • Values between CHF 1,025 and CHF 1,074 will be rounded to CHF 1,05
  • Values between CHF 1,075 and CHF 1,124 will be rounded to CHF 1,10

This conversation rule is commonly referred as “5 Rappen rounding” mostly used in Switzerland and Liechtenstein region for accounting and banking purposes.

You can read more details here.

Angular Pipe

If you want to use this conversation logic in your Angular application, I have published a NPM package to do so.

This package consists of an Angular Pipe, which you can apply in your HTMl or in Component TypeScript file.

Using Pipe in Component’s HTML

You can apply this pipe as any regular Angular pipe, without any arguments. For example, here we have an input textbox to accept a numeric value. This value is then passed to the NgxSwissFiveRappenChf pipe, which return the converting value.

<h2 class="top-spacer">Usage</h2>
<div class="top-spacer">
<input type="number" [(ngModel)]="inputValue">
<h3>Output: {{ inputValue | ngxSwissFiveRappenChf }} </h3>
</div>

Using Pipe in Component’s TypeScript

There might be a need to apply such conversation in Component’s TypeScript file. This can be easily done by calling transform() a method of pipe, and passing the input value as an argument.

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'ngx-swiss-5-rappen-pipe-example';

inputValue = 2.034;
outputValue!: number;

ngOnInit() {
const pipe = new NgxSwissFiveRappenChfPipe();
this.outputValue = pipe.transform(this.inputValue);
console.debug('🔥 output', this.outputValue);
}

}

Here is the GitHub repository for this package. If you like it, give it a Star ⭐️

Cheers!